I have the following markup:
<div class="secondary-filter" onclick="searchByFilter()">
<ul class="secondary-filter__list">
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
<label for="secondaryFilter-all">All</label>
</li>
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-quoted">Marked</label>
</li>
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
<label for="secondaryFilter-unquoted">Pending</label>
</li>
</ul>
</div>
How can I obtained the label of the checked radio button in the following function?
function searchByFilter() {
var x = $("input[name='secondaryFilter']").find('input:checked');
console.log(x.val());
}
I'm trying this.. but it's not working. Please help.
Your $("input[name='secondaryFilter']") creates a jQuery object if <input> elements, but .find only searches through descendants - the input elements don't have any descendants, rather you want to get the matching <input> in the current collection.
You should also attach the event listener using Javascript rather than in an HTML attribute. By listening for change events, you'll have events that only fire when one of the inputs change, rather than when anywhere in the container is clicked.
Also, probably best to have the label next to each input have its for attribute match the id of the input - that way, when clicking the label, the input will be checked - eg, change
<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-quoted">Marked</label>
to
<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-marked">Marked</label>
^^^^^^
While you could use .filter instead, to find the element in the current jQuery object matching the condition:
$("input[name='secondaryFilter']").on('change', function() {
var x = $("input[name='secondaryFilter']").filter('input:checked');
console.log(x.val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="secondary-filter">
<ul class="secondary-filter__list">
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
<label for="secondaryFilter-all">All</label>
</li>
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-marked">Marked</label>
</li>
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
<label for="secondaryFilter-pending">Pending</label>
</li>
</ul>
</div>
It would be easier to just put the :checked into the first selector string:
const checkedInput = $("input[name='secondaryFilter']:checked");
$("input[name='secondaryFilter']").on('change', function() {
var x = $("input[name='secondaryFilter']:checked");
console.log(x.val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="secondary-filter">
<ul class="secondary-filter__list">
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
<label for="secondaryFilter-all">All</label>
</li>
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-marked">Marked</label>
</li>
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
<label for="secondaryFilter-pending">Pending</label>
</li>
</ul>
</div>
To make this work attach a change event handler directly to the radio elements. Then you can get $(this).val() from it when the event occurs. You can also use next().text() to get the value shown in the label, although given that the radio value and innerText of the label are the same, this seems a little redundant.
Also note that the for attributes of the label elements need to match the id of the targeted radio, so I've fixed the HTML there too.
$('.secondary-filter :radio').on('change', function() {
var $radio = $(this);
var $label = $radio.next();
console.log(`value: ${$radio.val()}, label: ${$label.text()}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="secondary-filter">
<ul class="secondary-filter__list">
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
<label for="secondaryFilter-all">All</label>
</li>
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-marked">Marked</label>
</li>
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
<label for="secondaryFilter-pending">Pending</label>
</li>
</ul>
</div>
Use
input[name='secondaryFilter']:checked" ,'.secondary-filter'
It will check for checked radio button inside the class of the div
function searchByFilter() {
var x = $("input[name='secondaryFilter']:checked" ,'.secondary-filter')
console.log(x.val())
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="secondary-filter" onclick="searchByFilter()">
<ul class="secondary-filter__list">
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
<label for="secondaryFilter-all">All</label>
</li>
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-quoted">Marked</label>
</li>
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
<label for="secondaryFilter-unquoted">Pending</label>
</li>
</ul>
</div>
var x = $('input[name=secondaryFilter]:checked').val()
Related
this is my default HTML-Markup from the Wordpress-Plugin:
<ul class="gfield_checkbox" id="input_2_21">
<li class="gchoice_2_21_1">
<input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1">
<label for="choice_2_21_1" id="label_2_21_1">Option One</label>
</li>
<li class="gchoice_2_21_2">
<input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2">
<label for="choice_2_21_2" id="label_2_21_2">Option Two</label>
</li>
</ul>
After the document is ready I want to change the HTML-Markup to this:
<ul class="gfield_checkbox" id="input_2_21">
<li class="gchoice_2_21_1 checkbox checkbox-styled">
<label for="choice_2_21_1" id="label_2_21_1">
<input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1">
<span>Option One</span>
</label>
</li>
<li class="gchoice_2_21_2 checkbox checkbox-styled">
<label for="choice_2_21_2" id="label_2_21_2">
<input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2">
<span>Option Two</span>
</label>
</li>
</ul>
Thats what I actually did:
$('.gfield_checkbox > li').addClass('checkbox checkbox-styled');
But how do I change the other parts of the code?
To change the html, there is a few ways to do it. One way is to wrap the text inside with the span, and than select the sibling and add it inside of the label.
$("li")
.addClass("checkbox checkbox-styled")
.find("label")
.wrapInner("<span/>")
.each(function(){
label = $(this)
label.prepend(label.prev())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="gfield_checkbox" id="input_2_21">
<li class="gchoice_2_21_1">
<input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1">
<label for="choice_2_21_1" id="label_2_21_1">Option One</label>
</li>
<li class="gchoice_2_21_2">
<input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2">
<label for="choice_2_21_2" id="label_2_21_2">Option Two</label>
</li>
</ul>
Details are commented in demo.
Demo
/*
On each <li>...
- ...add class .checkbox and .checkbox-styled
- Find each <label> and <input> nested in each <li>
- Remove the text from the <label>...
- ...append the <input> to <label>...
- ...append a <span> to <label>...
- ...insert the value of <input> as the text of the <span>
*/
$('li').each(function(i) {
$(this).addClass('checkbox checkbox-styled');
var label = $(this).find('label');
var input = $(this).find('input');
label.text('').append(input).append(`<span>${input.val()}</span>`);
});
<ul class="gfield_checkbox" id="input_2_21">
<li class="gchoice_2_21_1">
<input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1">
<label for="choice_2_21_1" id="label_2_21_1">Option One</label>
</li>
<li class="gchoice_2_21_2">
<input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2">
<label for="choice_2_21_2" id="label_2_21_2">Option Two</label>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have the following html and I want to set the value of the second radio button in the list to be checked. I know I can do this using the id attribute but how can I do the same
by using the class selector as below and chaining the input field to be checked?
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
...
</ul>
$(".myOptionList li:nth-child(2)"); // how do i chain input field and set it as checked
Below code may help you.
HTML
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
jQuery
$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);
For versions of jQuery prior to 1.6, use:
$(".myOptionList li:nth-child(2)").find('input:radio').attr('checked', 'checked');
$(document).ready(function(){
$(".radio1 li:nth-child(4)").find('input:radio').prop('checked',true);
$(".radio2 li:nth-child(2)").find('input:radio').prop('checked',true);
$(".radio li:nth-child(1)").find('input:radio').prop('checked',true);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
Fourth child selected:
<ul class="radio1">
<li>
<input id="1" type="radio" value="1" name="option1">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option1">
<label >two</label>
</li>
<li>
<input id="3" type="radio" value="3" name="option1">
<label >three</label>
</li>
<li>
<input id="4" type="radio" value="4" name="option1">
<label >four</label>
</li>
</ul>
Second child selected:
<ul class="radio2">
<li>
<input id="1" type="radio" value="1" name="option2">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option2">
<label >two</label>
</li>
<li>
<input id="3" type="radio" value="3" name="option2">
<label >three</label>
</li>
<li>
<input id="4" type="radio" value="4" name="option2">
<label >four</label>
</li>
</ul>
First child selected:
<ul class="radio">
<li>
<input id="1" type="radio" value="1" name="option">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option">
<label >two</label>
</li>
</ul>
First child selected:(same class name)
<ul class="radio">
<li>
<input id="1" type="radio" value="1" name="option4">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option4">
<label >two</label>
</li>
</ul>
</body>
</html>
Even the use of:
$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);
Works apparently, it is just for a case.
It set the checked on all the radio until the last one, that it is set just because it is the last.
A more meaning solution would be to use the .last() to go directly on the radio option you want to set:
$(function(){
// Set the last checked radio
$('.myOptionList li > input[name="options"]').last().prop('checked', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" checked name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
...
</ul>
To ensure it's working properly I set the first radio checked.
But I suggest to change your code in a way that you select the radio on the value attribute.
The benefit of this is that your code will be more clear and easy to understand and change, and more if the order of radios change it will still works.
i need to add the total number of check box checked count value in element.
But when i checked the check box in "heading 2" part , the count value was added in "heading 1" part .
I did not find the issue any one please guide me resolve this issue
DEMO
HTMl:
<div id="main">
<div class="a">
<div class="row">
<div class="col-md-12 cb_select_head">
<a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"><span class=
"glyphicon ecm-caret-down"></span></a><span class="labelBlock labelCounter">
<span class="count-checked-checkboxes">0</span></span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in" id="function-collapse">
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c1" name="cc" type="checkbox">
<label for="c1">asdas</label>
</li>
<li class="noArrow">
<input id="c2" name="cc" type="checkbox">
<label for="c2">asdasd</label>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c3" name="cc" type="checkbox">
<label for="c3">asdasd
</label>
<ul>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asd 1</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">sadas 2</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asdas 3</label></li>
</ul>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c4" name="cc" type="checkbox">
<label for="c4">asdasd</label>
</li>
<li class="noArrow">
<input id="c5" name="cc" type="checkbox">
<label for="c5">five</label>
</li>
</ul>
</div>
</div>
<!--First List End-->
<!--Second list start -->
<div class="a">
<div class="row">
<div class="col-md-12 cb_select_head">
<a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"><span class=
"glyphicon ecm-caret-down"></span></a><span class="labelBlock labelCounter">
<span class="count-checked-checkboxes">0</span></span>
<span class="fb_options_head">heading 2</span>
</div>
<ul class="sidebar fb-list-option collapse in" id="function-collapse">
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c1" name="cc" type="checkbox">
<label for="c1">asdas</label>
</li>
<li class="noArrow">
<input id="c2" name="cc" type="checkbox">
<label for="c2">asdasd</label>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c3" name="cc" type="checkbox">
<label for="c3">asdasd
</label>
<ul>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asd 1</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">sadas 2</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asdas 3</label></li>
</ul>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c4" name="cc" type="checkbox">
<label for="c4">asdasd</label>
</li>
<li class="noArrow">
<input id="c5" name="cc" type="checkbox">
<label for="c5">five</label>
</li>
</ul>
</div>
</div>
</div>
JS:
$(document).ready(function() {
var $checkboxes = $(
'#main ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('.count-checked-checkboxes').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes').val(
countCheckedCheckboxes);
});
});
see the working solution. Remember IDs needs to be unique, and avoid use of IDs whenever possible like putting input element inside the label instead of using with Id
$(document).ready(function() {
var $checkboxes1 = $('#head1 ul input[type="checkbox"]');
var $checkboxes2 = $('#head2 ul input[type="checkbox"]');
$checkboxes1.change(function() {
var countCheckedCheckboxes = $checkboxes1.filter(':checked').length;
$('#head1 .count-checked-checkboxes').text(countCheckedCheckboxes);
});
$checkboxes2.change(function() {
var countCheckedCheckboxes = $checkboxes2.filter(':checked').length;
$('#head2 .count-checked-checkboxes').text(countCheckedCheckboxes);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="head1">
<div class="row">
<div class="col-md-12 cb_select_head">
<span class="count-checked-checkboxes">0</span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in">
<li>
<label>
<input name="cc" type="checkbox">One
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">Two
</label>
</li>
<li>
<ul>
<li>
<label>
<input name="cc" type="checkbox">3 - a
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">3 -b
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">2 - c
</label>
</li>
</ul>
</li>
<li>
<label>
<input name="cc" type="checkbox">four
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">five
</label>
</li>
</ul>
</div>
</div>
<!--First List End-->
<!--Second list start -->
<div class="a" id="head2">
<div class="row">
<div class="col-md-12 cb_select_head">
<span class="count-checked-checkboxes">0</span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in">
<li>
<label>
<input name="cc" type="checkbox">One
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">Two
</label>
</li>
<li>
<ul>
<li>
<label>
<input name="cc" type="checkbox">3 - a
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">3 - b
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">2 - c
</label>
</li>
</ul>
</li>
<li>
<label>
<input name="cc" type="checkbox">four
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">five
</label>
</li>
</ul>
</div>
</div>
</div>
See if this works.
Ignoring everything others have mentioned, about ID's needing to be unique and what not, I was able to tally checked boxes for each heading using DOM traversal.
I changed the jQuery to:
$(document).ready(function() {
$('.a').each(function(){
var $checkboxes = $(this).find('input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
$(this).closest('.a').find('.count-checked-checkboxes').text(
countCheckedCheckboxes);
});
});
});
Loop through each element '.a'
Use $(this).find('input[type="checkbox"]'); to get just the relevant checkboxes
On change, traverse up the DOM until you find '.a', from there you can traverse down and find the heading class '.count-checked-checkboxes'
There's probably a better way to do this though.
.closest() starts at the current element and travels upwards looking for a match.
.find() travels downwards through descendants.
Couple things.
j08691 is right, IDs must be unique. The browser is getting the first #count-checked-checkboxes and filling that value.
Also, you are getting the count for all checkboxes which is going to tally all checkboxes regardless of which div they are in
I would suggest the following:
$(document).ready(function() {
var $checkboxes = $(
'.a ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('#count-checked-checkboxes-a').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes-a').val(
countCheckedCheckboxes);
});
});
But you are still getting all checkboxes. At which point I would change your second <div class="a"> to <div class="b"> and then duplicate the above statement like so:
$(document).ready(function() {
var $checkboxes = $(
'.b ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('#count-checked-checkboxes-b').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes-b').val(
countCheckedCheckboxes);
});
});
And of course change your IDs to match the ones in the jquery.
https://jsfiddle.net/gqcgwjq2/28/
I want to apply some design on the next element. But my problem is I am getting this error:
Error: Syntax error, unrecognized expression: [object Object] > label
Here's my selections:
BROWSE BY
<ul class="list-unstyled">
<li>
<input type="radio" id="cat-1" class="category_select" name="category_type" data-category-type="1" value="all_product" checked="checked" />
<label for="cat-1"><span></span>All</label>
</li>
<li>
<input type="radio" id="cat-2" class="category_select" name="category_type" data-category-type="2" value="japanese_tea" />
<label for="cat-2"><span></span>Japanese Tea</label>
</li>
<li>
<input type="radio" id="cat-3" class="category_select" name="category_type" data-category-type="3" value="black_vinegar" />
<label for="cat-3"><span></span>Black Vinegar</label>
</li>
<li>
<input type="radio" id="cat-4" class="category_select" name="category_type" data-category-type="4" value="food" />
<label for="cat-4"><span></span>Food</label>
</li>
<li>
<input type="radio" id="cat-5" class="category_select" name="category_type" data-category-type="5" value="cosmetic_health" />
<label for="cat-5"><span></span>Cosmetic / Health</label>
</li>
<li>
<input type="radio" id="cat-6" class="category_select" name="category_type" date-category-type="6" value="others" />
<label for="cat-6"><span></span>Others</label>
</li>
</ul>
Here's my JS:
$('.category_select').on('change', function() {
var cat = $(this);
var category_type = $(this).data('category-type');
$(cat + ' > label').css({'color':'red'}); //wont apply some css why?
});
Can you help me with this?
You need to use .next() traversal method to get the next sibling of an element
In your code cat is a jQuery object so when used in string concatenation your selector becomes [object Object] > label
$('.category_select').on('change', function() {
var cat = $(this);
var category_type = $(this).data('category-type');
cat.next('label').css({
'color': 'red'
}); //wont apply some css why?
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled">
<li>
<input type="radio" id="cat-1" class="category_select" name="category_type" data-category-type="1" value="all_product" checked="checked" />
<label for="cat-1"><span></span>All</label>
</li>
<li>
<input type="radio" id="cat-2" class="category_select" name="category_type" data-category-type="2" value="japanese_tea" />
<label for="cat-2"><span></span>Japanese Tea</label>
</li>
<li>
<input type="radio" id="cat-3" class="category_select" name="category_type" data-category-type="3" value="black_vinegar" />
<label for="cat-3"><span></span>Black Vinegar</label>
</li>
<li>
<input type="radio" id="cat-4" class="category_select" name="category_type" data-category-type="4" value="food" />
<label for="cat-4"><span></span>Food</label>
</li>
<li>
<input type="radio" id="cat-5" class="category_select" name="category_type" data-category-type="5" value="cosmetic_health" />
<label for="cat-5"><span></span>Cosmetic / Health</label>
</li>
<li>
<input type="radio" id="cat-6" class="category_select" name="category_type" date-category-type="6" value="others" />
<label for="cat-6"><span></span>Others</label>
</li>
</ul>
You can directly select the next label using the id attribute of selected input box
$('.category_select').on('change', function() {
var cat = this.id;
var category_type = $(this).data('category-type');
$("label").css({'color':'black'}) // Remove red color from previously selected item
$("label[for='"+cat+"']").css({'color':'red'}); // Apply red color on selected item
});
JSFIDDLE EXAMPLE
you need to use .next() selector for selecting the next element, instead $(cat + ' > label')
$('.category_select').on('change', function() {
var cat = $(this);
var category_type = $(this).data('category-type');
cat.next('label').css({'color':'red'}); //syntax for selecting next in js
});
Hope this helped you out??
On clicking on the Populate Values button the div below the button should populate the values of the selected radio buttons of the preferred and home locations respectively
I want to do it unobtrusively without inline JavaScript
<div id="form_block">
<div class="home-location">
<ul>
<li>Home Location</li>
<li>
<input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
for="home-india">India</label></li>
<li>
<input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
for="home-usa">USA</label></li>
</ul>
</div>
<div class="prefer-location">
<ul>
<li>Preferred Location</li>
<li>
<input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
for="preferred-india">India</label></li>
<li>
<input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
for="preferred-usa">USA</label></li>
</ul>
</div>
<div class="result">
My Home Location is: <span class="home-location-result"></span>and my preferred
location is: <span class="home-location-result"></span>
</div>
<input type="submit" value="Populate Values" id="ss" class="submit" />
Modified your HTML. Provided an id attribute for your result spans
$(function(){
$("#ss").click(function(){
// Find all input elements with type radio which are descendants of element with id `form`
var filt = $("#form_block input:radio");
// Apply a filter to the above object with `name='home-location'` and checked and get the value
var homeVal = filt.filter("[name='home-location']:checked").val();
// same as above
var preferredVal = filt.filter("[name='home-preferred']:checked").val();
// Set the text of the element width id `home-location-result' with the computed value
$("#home-location-result").text(homeVal);
// same as above
$("#preferred-location-result").text(preferredVal);
return false;
});
});
See a working demo
use this it's works for me
<script>
function test()
{
var home= $('input:radio[name=home-location]:checked').val();
document.getElementById("h1").innerHTML=home;
var preferred= $('input:radio[name=home-preferred]:checked').val();
document.getElementById("h2").innerHTML=preferred;
return false;
}
</script>
<form onsubmit="return test();">
<div id="form_block">
<div class="home-location">
<ul>
<li>Home Location</li>
<li>
<input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
for="home-india">India</label></li>
<li>
<input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
for="home-usa">USA</label></li>
</ul>
</div>
<div class="prefer-location">
<ul>
<li>Preferred Location</li>
<li>
<input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
for="preferred-india">India</label></li>
<li>
<input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
for="preferred-usa">USA</label></li>
</ul>
</div>
<div class="result">
My Home Location is: <span class="home-location-result" id="h1"></span>and my preferred
location is: <span class="home-location-result" id='h2'></span>
</div>
<input type="submit" value="Populate Values" id="ss" class="submit" />
</form>