how to I uncheck boxes when checking others with j

Question

I have this html -

<ol class="subproduct">
<li>
    <input type="checkbox" name="extra2" value="Multidispositivo" />
    <p class="checkbox"></p>
    <h3>test<span class="price"><span>+2</span>€</span></h3>
    <p>test words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="Multidispositivo" />
    <p class="checkbox"></p>
    <h3>test</h3>
    <p>test words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="15 min extra" />
    <p class="checkbox"></p>
    <h3>test/h3>
    <p>test words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="Multidispositivo" />
    <p class="checkbox"></p>
    <h3>test</h3>
    <p>test words</p>
</li>
</ol>

which I need to add a class to the li on 'checking' the checkbox. Currently I use this

$(document).ready(function() {
  $('.subproduct input:checkbox').change(function(){
     if($(this).is(":checked")) {
         $(this).parent().toggleClass("checked");
     }
  });
});

but I need it so that only ever one checkbox is checked by the user so if they check another box it removes the class of any other

How is this possible?

Answer 1

remove the class of all <li>'s on chnage event... using removeClass();...and then if checked toggleClass() of that <li>

try this

$(document).ready(function() {
  $('.subproduct input:checkbox').change(function(){
   $(".subproduct li").removeClass("checked"); //<---here
    if($(this).is(":checked")) {
     $(this).parent().toggleClass("checked"); // and using addClass("checked") here is better .. 
    }
  });
 });

Answer 2

Try this http://jsfiddle.net/QHuV9/4/

 $(document).ready(function() {
  $('.subproduct input:checkbox').change(function(){
     if($(this).is(":checked")) {
         $(this).parent("li").addClass("checked");
     }

      else {
      $(this).parent("li").removeClass("checked");
      }
  });
});

I hope i am taking your question rite

Answer 3

The simplest solution is something like:

$(document).ready(function() {
  $('.subproduct input:checkbox').change(function(){
     if($(this).is(":checked")) {
         $(this).parent().siblings().removeClass('checked');
         $(this).parent().addClass("checked");
     }
  });
});

And I would advise to use <input type="radio"> so that the behavior will be understood by user.

Answer 4

See this: Sample

$(document).ready(function() {
 $('.subproduct input:checkbox').change(function(){
   $('.subproduct input:checkbox').not(this).attr("checked",false);
   $(".subproduct li").removeClass("checked");
   if($(this).is(":checked")) {
       $(this).parent().toggleClass("checked");
   }
 });
});

Answer 5

try this DEMO

$(document).ready(function() {
  $('.subproduct input:checkbox').change(function(){
    if($(this).is(":checked")) {
       $(':checkbox').prop('checked',false);
       $('ol li').removeClass('checked');
       $(this).prop('checked',true);
       $(this).parent().addClass('checked');
    } else {
       $(this).parent().removeClass('checked');
    }
  });
});