I want to make the unchecked radio buttons hide, and just display the checked one:
<ul class="woof_list woof_list_radio">
<li >
<input type="radio" id="woof_72_55cb07a61800a" class="woof_radio_term" data-slug="elektronik" name="product_cat" value="72">
<label for="woof_72_55cb07a61800a">Elektronik <span>(812)</span></label>
</li>
<li >
<input type="radio" id="woof_113_55cb07a741fec" class="woof_radio_term" data-slug="pompa-air" name="product_cat" value="113" checked="checked">
<label for="woof_113_55cb07a741fec" checked="checked" style="font-weight: bold;">Pompa Air <span>(29)</span></label>
</li>
<li >
<input type="radio" id="woof_184_55cb07a7513ac" class="woof_radio_term" data-slug="brand" name="product_cat" value="184">
<label for="woof_184_55cb07a7513ac">Brand <span>(814)</span></label>
</li>
</ul>
Here is my JavaScript:
$(document).ready(function(){
$("ul.woof_list").find("li").each(function(index){
$(this).find('input[checked="checked"]', ".woof_list");
$( this ).click( function( e ) {
e.preventDefault();
// by default, hide all li's
$( 'ul.woof_list li' ).toggle();
$( '.woof_is_closed' ).trigger('click');
// show only the selected li
$( this ).show();
});
console.log($(this).find('input[checked="checked"]', ".woof_list").val());
I got the value of the radio button, but I do not know what should I do then.
I want to make the unchecked radio buttons hide, and just display the checked one:
<ul class="woof_list woof_list_radio">
<li >
<input type="radio" id="woof_72_55cb07a61800a" class="woof_radio_term" data-slug="elektronik" name="product_cat" value="72">
<label for="woof_72_55cb07a61800a">Elektronik <span>(812)</span></label>
</li>
<li >
<input type="radio" id="woof_113_55cb07a741fec" class="woof_radio_term" data-slug="pompa-air" name="product_cat" value="113" checked="checked">
<label for="woof_113_55cb07a741fec" checked="checked" style="font-weight: bold;">Pompa Air <span>(29)</span></label>
</li>
<li >
<input type="radio" id="woof_184_55cb07a7513ac" class="woof_radio_term" data-slug="brand" name="product_cat" value="184">
<label for="woof_184_55cb07a7513ac">Brand <span>(814)</span></label>
</li>
</ul>
Here is my JavaScript:
$(document).ready(function(){
$("ul.woof_list").find("li").each(function(index){
$(this).find('input[checked="checked"]', ".woof_list");
$( this ).click( function( e ) {
e.preventDefault();
// by default, hide all li's
$( 'ul.woof_list li' ).toggle();
$( '.woof_is_closed' ).trigger('click');
// show only the selected li
$( this ).show();
});
console.log($(this).find('input[checked="checked"]', ".woof_list").val());
I got the value of the radio button, but I do not know what should I do then.
Share Improve this question edited Aug 12, 2015 at 12:44 matsjoyce 5,8446 gold badges34 silver badges38 bronze badges asked Aug 12, 2015 at 9:03 Haryono SariputraHaryono Sariputra 3101 gold badge6 silver badges20 bronze badges 8-
4
$('input[type=checkbox]:not(:checked)').hide()? – Toni Michel Caubet Commented Aug 12, 2015 at 9:04 - 3 It is unclear what you want. When you click one of the radiobuttons, you want to hide the 2 others that are not checked, or? – Loyalar Commented Aug 12, 2015 at 9:08
- Ya not clear because you are setting your logic inside pseudo ready event so if you want it by default, just use CSS ↯↯↯ – A. Wolff Commented Aug 12, 2015 at 9:09
-
2
input[type=radio]:not(:checked) { display: none; }– Abhitalks Commented Aug 12, 2015 at 9:09 - 2 So after the user clicks a selection, they cannot change it? Sounds like a very confusing and frustrating user interface. Don't do it. – Jim Garrison Commented Aug 12, 2015 at 15:50
4 Answers
Reset to default 7Try this
$(document).ready(function () {
$(':radio').on('change', function () {
$(':radio').not($(this)).closest('li').hide();
});
});
https://jsfiddle/ds3Lfms7/1/
It will hide all the other li's when you check one
Just in case you want to keep the toggle behavior you had, so clicking the radio again will bring up all options you may want to try that :
$(document).ready(function(){
$("ul.woof_list li input[type='radio']").click( function( e ) {
// hide all li's (or show all)
$( 'ul.woof_list li' ).toggle();
// show only the selected li
$(this).parent().show();
});
});
http://jsfiddle/optionsit/pa0Lmwpg/2/
If you asking for hiding only unchecked radio button then Try this
demo
$('input[type=radio]:not(:checked)').hide();
$('li').click( function () {
$('input[type=radio]').show();
$('input[type=radio]:not(:checked)').hide();
});
A bination of @DGS's answer and @Lorenzo's answer. It uses DGS's cleaner form, but has Lorenzo's toggle() feature to allow the user to re-show the items by clicking re-clicking. This is just better UX, allowing the user to correct his choice in case the he made a mistake, initially.
demo here
$(document).ready(function () {
$(':radio').on('click', function () {
$(':radio').not($(this)).closest('li').toggle();
});
});
Where's Lorenzo's answer does not work properly with jQuery Mobile 1.4.2 checked, this answer does.