I have given
<ul class="test1" style="height: 175px;">
<li class=" ">
<label class="ui-corner-all" title="" for="ui-multiselect-apps_data_usage_operator_country-option-0">
<input type="checkbox" aria-selected="true" title="" value="All" name="multiselect_apps_data_usage_operator_country" id="ui-multiselect-apps_data_usage_operator_country-option-0"><span>All</span>
</label>
</li>
<li class=" ">
<label class="ui-corner-all" title="" for="ui-multiselect-apps_data_usage_operator_country-option-1">
<input type="checkbox" title="" value="1" name="multiselect_apps_data_usage_operator_country" id="ui-multiselect-apps_data_usage_operator_country-option-1" aria-selected="true"><span>XYZ</span>
</label>
</li>
</ul>
Now I want to take out that value of span from li where input aria-selected="true" through jquery. Please help me out.
Please try this
$(function(){
$("input[type='checkbox']").each(function(){
if ( $(this).attr('aria-selected') == 'true' ){
alert($(this).next().text())
}
});
});
Demo
You can use this:
$('li input[aria-selected="true"] + span').text();
Snippet
$(function () {
alert($('li input[aria-selected="true"] + span').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="test1" style="height: 175px;">
<li class=" ">
<label class="ui-corner-all" title="" for="ui-multiselect-apps_data_usage_operator_country-option-0">
<input type="checkbox" aria-selected="true" title="" value="All" name="multiselect_apps_data_usage_operator_country" id="ui-multiselect-apps_data_usage_operator_country-option-0"><span>All</span>
</label>
</li>
<li class=" ">
<label class="ui-corner-all" title="" for="ui-multiselect-apps_data_usage_operator_country-option-1">
<input type="checkbox" title="" value="1" name="multiselect_apps_data_usage_operator_country" id="ui-multiselect-apps_data_usage_operator_country-option-1" aria-selected="true"><span>XYZ</span>
</label>
</li>
</ul>
Simple one liner might do it.
alert($(":checkbox[aria-selected='true'] + span").text());
DEMO
Related
I have a buch of checkbox in different containers like below:
$("input:checkbox").click(function() {
var url = "http://example.com/results?&"
var flag = false;
var $box = $(this);
var $facet = $box.val();
var $name = $box.attr("name");
var group = "input:checkbox['" + $facet + $name + "']:checked";
console.log(group);
$("#pruebita").not(this).attr("checked", false);
$(group).each(function() {
if (!flag) {
url = url + $(this).val() + $(this).attr('name');
flag = true; // To trace if first query string added
} else {
url = url + "&" + $(this).val() + $(this).attr('name');
}
});
console.log(url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="genderTitle">
<a class="filter facetTitle " id="gender">
gender
</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="women" value="gender=" data-facet="Gender">
<span class="fct-scroll-item">women</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="men" value="gender=" data-facet="Gender">
<span class="fct-scroll-item">men</span>
</label>
</li>
</ul>
</div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="occasionTitle">
<a class="filter facetTitle " id="occasion">
ocassion
</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="beach" value="occasion=" data-facet="Occasion">
<span class="fct-scroll-item">beach</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="street" value="occasion=" data-facet="Occasion">
<span class="fct-scroll-item">street</span>
</label>
</li>
</ul>
</div>
</ul>
I want that the checkboxes don't uncheck the previous option when checking another section of checkboxes.
The complete code is also at jsfiddle
In your code you have
$("#pruebita").not(this).attr("checked",false);
Which essentially is unchecking all the checkboxes except the clicked one. Removing this line of code will make it work fine.
See updated fiddle
You don't need any javascript at all for this problem; you just need to use appropriate form elements and set their attributes correctly.
Radio buttons are for when only one of a group of options should be selectable; checkboxes are for when more than one should be selectable. They aren't interchangeable. Do not use javascript to disguise radio button functionality as checkbox elements; that's bad usability, as it gives the user incorrect expectations about how the form will work.
Part of the problem is that you've confused the purpose of the "name" and "value" attributes. The "name" attribute is for defining which group the radio buttons belong to; all radio buttons with the same name will be in the same group. The "value" attribute contains the value that will be submitted as part of the form if that option is selected. You had them backwards:
<input type="checkbox" name="women" value="gender=" ...>
<input type="checkbox" name="men" value="gender=" ...>
With the above code, all the boxes have a unique 'name', so none of them would be grouped; meanwhile the user's selection wouldn't have any effect, since they both have the same value. Instead, that should be this:
<input type="radio" name="gender" value="women" ...>
<input type="radio" name="gender" value="men" ...>
That HTML will cause the form field "gender" to contain the value "women" or "men", depending on the user's selection. Here's the full corrected example:
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="genderTitle">
<a class="filter facetTitle" id="gender">gender</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="gender" value="women" data-facet="Gender">
<span class="fct-scroll-item">women</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="gender" value="men" data-facet="Gender">
<span class="fct-scroll-item">men</span>
</label>
</li>
</ul>
</div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="occasionTitle">
<a class="filter facetTitle " id="occasion">ocassion</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="occasion" value="beach" data-facet="Occasion">
<span class="fct-scroll-item">beach</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="occasion" value="street" data-facet="Occasion">
<span class="fct-scroll-item">street</span>
</label>
</li>
</ul>
</div>
</ul>
I have multiple inputs on the same page. Based on the selection and once the user press "Submit" I would like to show the relevant divs and hide the ones that are not related to the selection.
I could implement the structure I wanted but can not get the jQuery to display the different values.
Here is my code so far:
(function($) {
$('#quiz_submit').click(function() {
$('#quiz_submit').click(function() {
if ($('input[type="radio"]').attr("id") == "option-one") {
$('.a1').show();
$('.a2, .a3').hide();
} else if ($('input[type="radio"]').attr("id") == "option-two") {
$('.a2').show();
$('.a1, .a3').hide();
} else($('input[type="radio"]').attr("id") == "option-three") {
$('.a3').show();
$('.a1, .a2').hide();
}
});
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Question 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Question 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Question 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<input type="button" id="quiz_submit" class="submit-cta" value="SUBMIT">
<div class="a1">Answerof the questoon - One </div>
<div class="a2">Answerof the questoon - Two </div>
<div class="a3">Answerof the questoon - Three </div>
You need to add a button with id=quiz_submit in your HTML. You also have typos in the third and final condition.
(function($) {
$('#quiz_submit').click(function() {
let checkedId = $('input[type=radio][name=quiz-selector]:checked').attr('id')
if (checkedId == "option-one") {
$('.a1').show();
$('.a2, .a3').hide();
} else if (checkedId == "option-two") {
$('.a2').show();
$('.a1, .a3').hide();
} else if(checkedId == "option-three") {
$('.a3').show();
$('.a1, .a2').hide();
}
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Question 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Question 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Question 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<input type="button" id="quiz_submit" value="submit"/>
<div class="a1">Answerof the questoon - One </div>
<div class="a2">Answerof the questoon - Two </div>
<div class="a3">Answerof the questoon - Three </div>
If your problem is that your jQuery isn't working, it may have to do with the fact that there isn't any way for your code to get run.
First you have a click function inside a click function, take away one of those. Secondly there is no button to for that click handler to even run. I can't see anything particularly wrong with the code, as those were the things that stuck out to me.
Let me know if you are still getting an error after fixing that.
There's no element with the id quiz_submit in your html code.
i just created a code for you. that may be your answer.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Question 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Question 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Question 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<div class="a1" style="display:none">Answerof the questoon - One </div>
<div class="a2" style="display:none">Answerof the questoon - Two </div>
<div class="a3" style="display:none">Answerof the questoon - Three </div>
and jquery
$(document).ready(function(){
$('input[type="radio"]').change(function(){
if($(this).attr("id")=="option-one"){
$(".a1").show();
$(".a2").hide();
$(".a3").hide();
}
if($(this).attr("id")=="option-two"){
$(".a1").hide();
$(".a2").show();
$(".a3").hide();
}
if($(this).attr("id")=="option-three"){
$(".a1").hide();
$(".a2").hide();
$(".a3").show();
}
});
});
and here is working fiddle.
ClickHereForFiddle
I am having Html in which i need focus on label tag when input is clicked
<li class="princee" data-category="connectivity">
<label class="pack-switch" tabindex="0">
<input class="airplaneMode-input uninit lambas" type="checkbox">
<span id="menuItem-airplaneMode" class="menu-item" data-icon="airplane" data-l10n-id="airplaneMode"></span>
</label>
</li>
Try the following code
<li class="princee" data-category="connectivity">
<label class="pack-switch" tabindex="0" id="cc" contenteditable>Focus Here</label>
<input class="airplaneMode-input uninit lambas" type="checkbox" onchange="scriptmethod()">
<span id="menuItem-airplaneMode" class="menu-item" data-icon="airplane" data-l10n-id="airplaneMode"></span>
Script
function scriptmethod()
{
document.getElementById("cc").focus();
}
First time radio selection works but if i am selecting radio second time then its not showing as selected. attribute checked=checked showing in html but its not reflection in UI.
What is the solution for this that it can reflect.
Here is script code to apply attribute."
$('#' + myradioid+ ' input:radio').attr("checked", "checked")
Here is my html
<ul id="Ulist" class="Ulist1">
<h2 class="QuestionTxt">First question </h2>
<li id="117184normal" class="statusDefaultAns">
<a id="117184" href="#" onclick="Select(117184);">
<h2>
<input quiz-option="multiple-radio" id="Radio1" type="radio" name="quiz-radio" res="117184">
<label style="cursor: pointer" for="117184">true</label>
</h2>
</a>
</li>
<li id="117185normal" class="statusDefaultAns"><a id="117185" href="#" onclick="Select(117185);">
<h2>
<input quiz-option="multiple-radio" id="Radio2" type="radio" name="quiz-radio" res="117185">
<label style="cursor: pointer" for="117185">false</label>
</h2>
</a>
</li>
<li id="117352normal" class="statusDefaultAns">
<a id="117352" href="#" onclick="Select(117352);">
<h2>
<input quiz-option="multiple-radio" id="Radio3" type="radio" name="quiz-radio" res="117352">
<label style="cursor: pointer" for="117352">ws</label>
</h2>
</a>
</li>
</ul>
Plz provide a solution for this so that radio selection can refresh in ui.
Thanks
Dalvir
Try .prop instead of attr:
$('#' + myradioid+ ' input:radio').prop("checked", true)
Better yet, try it with the onclick method on the label instead of the line. Selecting something that selects itself could be causing an infinite loop, which would explain your problem. Try this code:
window.Select = function(id) {
$('#' + id + 'normal input[type="radio"]').click();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Ulist" class="Ulist1">
<h2 class="QuestionTxt">First question </h2>
<li id="117184normal" class="statusDefaultAns"><a id="117184" href="#"><h2>
<input quiz-option="multiple-radio" id="Radio1" type="radio" name="quiz-radio" res="117184" />
<label style="cursor:pointer" for="117184" onclick="Select(117184);">true</label></h2></a></li>
<li id="117185normal" class="statusDefaultAns"><a id="117185" href="#"><h2>
<input quiz-option="multiple-radio" id="Radio2" type="radio" name="quiz-radio" res="117185" />
<label style="cursor:pointer" for="117185" onclick="Select(117185);">false</label></h2></a></li>
<li id="117352normal" class="statusDefaultAns"><a id="117352" href="#"><h2>
<input quiz-option="multiple-radio" id="Radio3" type="radio" name="quiz-radio" res="117352" />
<label style="cursor:pointer" for="117352" onclick="Select(117352);">ws</label></h2></a></li>
</ul>
I have some jQuery that sets an image as a radio button for a star rating system. I wish to include a function that when the user cicks a radio button the image changes to checked and the previous radios are also change to checked.
I have managed to change the class of the checked button and I have some code that would change the class on the previous buttons also, but on a simpler div structure. I have been able to combine the both.
The code to change the class for the radio button
$(function() {
$('input:radio').each(function() {
$(this).hide();
$('<a title=" check me " class="radio-fx '+this.name+'" href="#"><div class="radio"></div></a>').insertAfter(this);
});
$('.radio-fx').live('click',function(e) {
e.preventDefault();
$check = $(this).prev('input');
var unique = '.'+this.className.split(' ')[1]+' div';
$(unique).attr('class', 'radio');
$(this).find('div').attr('class', 'radio-checked');
$check.attr('checked', true);
});
});
html:
<div class="voteGroup">
<input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio-checked"></div>
</a>
<input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
<input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
</div>
Code that I tried to integrate to set previous ones to checked on hover:
$('.radio-fx').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('radio-checked');
$(this).nextAll().removeClass('radio');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('radio');
}
);
Thanks for any help.
<div class="voteGroup">
<input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
<input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
<input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
</div>
<style type="text/css">
.radio-fx { float:left;margin:10px;}
.radio-fx .radio{ background:#ff0; width:20px; height:20px;}
.radio-checked .radio{ background:#f0f;}
</style>
<script type="text/javascript" src="../share/libs/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function() {
$('.radio-fx').live( "mouseenter", function() { // Handles the mouseover
var $self = $(this);
$self.addClass('radio-checked').prevAll().addClass('radio-checked');
$self.nextAll().removeClass('radio-checked');
}).live ( "mouseout", function() { // Handles the mouseout
$(this).removeClass('radio').prevAll().removeClass('radio'); // what is this for?
});
});
</script>
complete test code here, have a try