Develop Reference

change classname of parent span element using javascript

how can we change classname of parent span element on click of input radio button.
<label for="L">
<span class="lbllevel1">
<span class="label-size">L</span>
<input id="L" name="size" type="radio" value="L">
</span>
</label>
I want to add "selected" class to span element which is with class "lbllevel1" on click of radio button.
Basically, i need output as <span class="lbllevel1 selected"> when radio button is clicked

you can add an event listener to radio button for click event or change event, use document.getElementById('L') to get the input, and inside event handler function use e.currentTarget to get current clicked input, you can use .classList += to add class to element, something like this:
var input = document.getElementById('L');
input.addEventListener("click", function(e){
e.currentTarget.parentElement.classList += ' selected';
})
.selected{
background-color:#888888;
}
<label for="L">
<span class="lbllevel1">
<span class="label-size">L</span>
<input id="L" name="size" type="radio" value="L">
</span>
</label>

var lInput = document.getElementById("L");
lInput.addEventListener("click", function() {
lInput.parentNode.classList.add("selected");
})

You could listen to the change event of radio by then add parent element with selected class if radio is checked:
document.querySelector("#L").addEventListener("change", function () {
// check if radio is checked
if (this.checked)
{
// add .selected class to parent
this.parentElement.classList.add("selected");
}
});
working copy

<label for="L">
<span class="lbllevel1">
<span class="label-size">L</span>
<input id="L" name="size" onclick="changeAttr(this)" type="radio"
value="L">
</span>
</label>
<script>
function changeAttr(ele)
{
ele.parentElement.classList.add('newClass');
}
</script>
Please see if this is helpful or not :)

Check through name
if($("input:radio[name='Name']").is(":checked")) {
//write your code
}
Check through class
if($("input:radio[class='className']").is(":checked")) {
//write your code
}
Check through data
if($("input:radio[data-name='value']").is(":checked")) {
//write your code
}

How to get value in li using js in jquery mobile

<div id="radiodiv1">
<ul id="span1" data-role="listview">
<li>value1</li>
<li>value2</label></li>
</ul>
</div>
<br>
<table style="border:none;">
<tr>
<td>
<input type="text" id="item" />
</td>
<td>
<input type="button" value="Add params to list" onclick="appendToList()"/>
</td>
</tr>
</table>
script
$(document).on("click", "#bizParams", function(e) {
$("#span1").find("li").each(function(){
var product = $(this);
// rest of code.
console.log(product);
});
});
when clicked the button am getting in log as
Object[li.ui-li-static.ui-body-inherit.ui-first-child]
Object[li.ui-li-static.ui-body-inherit.ui-last-child]
i have to get the values as value1 and value2
can someone say what was wrong here

You want to get the text() property, not the entire object, change this:
console.log(product);
to this:
console.log(product.text());

Use
console.log(product.text());
(it is plain vanilla jQuery)

problem is with this line
var product = $(this);
You have to extract text
var product = $(this).text();

$("#myid li").click(function() {
alert(this.id); // id of clicked li by directly accessing DOMElement property
alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
alert($(this).html()); // gets innerHTML of clicked li
alert($(this).text()); // gets text contents of clicked li
});
jquery get the id/value of LI after click function

you should use :
$(document).on("click", "#bizParams", function(e) {
$("#span1").find("li").each(function(){
var product = $(this);
// rest of code.
console.log(product.text());
});
});
bur before that add the id="bizParams" to your button.
<input type="button" id="bizParams"value="Add params to list" />

How to find nearest div element using jquery selector?

my html:
<td class="result">
<div id="main_title">
<label for="textfield"></label>
<input type="text" name="textfield" id="textfield" value="<?php echo $row['leftpanelmaintitle']; ?>" />
</div>
<div id="edit">EDIT</div>
<div id="update">UPDATE</div>
</td>
my js:
$('#edit').click(function()
{
$('#main_title').show(1000,function(){
$('#update').show();
$('#textfield').focus();
});
})
i want to use common selector in the place of $('#main_title'). that is the address of previous div.
i tried;
$(this).click(function()
{
$(this).prev('div').show(1000,function(){
$('#update1').show();
$('#textfield').focus();
});
})
bt not working.

You should use $('id').children() to get the previous div by writing the id of that present div.

You can do this:
$('#edit').click(function () {
$(this).prev('#main_title').show(1000, function () {
$('#update').show();
$('#textfield').focus();
});
});
Here, $(this).prev('#main_title') will give you the previous div with ID main_title to the currently clicked div with ID edit
UPDATE
You can add a class named edit to the edit button and do it like this:
$('.edit').click(function () {
$(this).prev().show(1000, function () {
$('#update').show();
$('#textfield').focus();
});
});
Demo: Fiddle

Show/Hide with Checkbox using jQuery

I am trying to have a section of an html form to show/hide based on a checkbox. This is the essence code I have:
<script src="/js/jquery.js"></script>
<script language="JavaScript">
function toggle(className){
var $input = $(this);
if($(this).prop('checked'))
$(className).show();
else
$(className).hide();
}
</script>
<fieldset><legend>Check Here
<input type="checkbox" onclick="toggle('.myClass')" ></legend>
<span class="myClass">
<p>This is the text.</p>
</span>
</fieldset>
When you click on the checkbox, the span gets hidden and will not come back. I have also used $(this).is(':checked'). It appears that $(this).prop('checked') is evaluating to false whether it is checked or not. My best guess is that I am using $(this) incorrectly. What am I missing here?

HTML, pass this from on click event
<input type="checkbox" onclick="toggle('.myClass', this)" ></legend>
JS
function toggle(className, obj) {
var $input = $(obj);
if ($input.prop('checked')) $(className).hide();
else $(className).show();
}
OR, without using prop you can just do:
function toggle(className, obj) {
if ( obj.checked ) $(className).hide();
else $(className).show();
}
OR, in one-line using .toggle( display ):
function toggle(className, obj) {
$(className).toggle( !obj.checked )
}

Use an event handler that is'nt inline, and then just toggle() the element based on the checkbox state :
<script src="/js/jquery.js"></script>
<script type="text/javaScript">
$(function() {
$('input[type="checkbox"]').on('change', function() {
$(this).closest('fieldset').find('.myClass').toggle(!this.checked);
});
});
</script>
<fieldset>
<legend>Check Here<input type="checkbox"></legend>
<span class="myClass">
<p>This is the text.</p>
</span>
</fieldset>
FIDDLE
This would even work with several fieldset's with the same markup.

try binding event via jQuery, and then you can access to $(this):
$(document).ready(function() {
$(":checkbox").click(function(event) {
if ($(this).is(":checked"))
$(".myClass").show();
else
$(".myClass").hide();
});
});

<input type="checkbox" checked>
<input type="text" id="amount">
$document.ready(function() {
$("input:checked").on("click",function () {
$("#amount").toggle()
})
});

JavaScript click function null value in text box

I need to null the value in text box on click, currently I have written a code as such:
<div class="keyword_non">
<h1>Keywords : <a class="someClass question_off" title="Keywords "></a></h1>
<h2><input type="text" name="kw1" value="one" /></h2>
<h2><input type="text" name="kw2" value="two" /></h2>
<h2><input type="text" name="kw3" value="three" /></h2>
<h2><input type="text" name="kw4" value="four" /></h2>
</div>
<script type="text/javascript" src="/functions/javascript/custom/non_profit_edit.js"></script>
<script type="text/javascript" src="/functions/javascript/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/functions/javascript/custom/jquery-ui-1.8.7.custom.min.js"></script>
Inside non_profit_edit.js i have written as such
$(document).ready(function(){
$(".kw1").click(function() {
$(".kw1").val(" ");
});
$(".kw2").click(function() {
$(".kw2").val(" ");
});
$(".kw3").click(function() {
$(".kw3").val(" ");
});
$(".kw4").click(function() {
$(".kw4").val(" ");
});
});
But write now its not working properly. Is this any browser issues or error in code?

In the selector the '.' indicates a class. For names use
$('[name="kw1"]'). //

Error in code.
Your selector ".kw1" selects an element with kw1 as the class attribute. None of your inputs have a class, they just have names. Add classes to them or replace the selector in your jQuery to this format: $('[name="kw1"]')
You can also simplify your function by doing this:
$('.keyword_non')
.on('click', 'input[type="text"]', function(e) {
this.value = ''; // input that was clicked on
}

This is a syntax error in your code.you does not use dot(.) in click function.Dot(.) will use for class. when kw1 is name in your input