CODEWITHSUNDEEP
jqueryhtmlcheckbox
bob jomes
bob jomes

Reputation: 281

Script to check checkbox with li click not working

I have a script which is supposed to check a checkbox if the li is clicked, however this does not happen.

<ul>
<li><input type="checkbox">Tyrannosaurus</li>
<li><input type="checkbox">Tyrannosaurus</li>
<li><input type="checkbox">Tyrannosaurus</li>
<li><input type="checkbox">Tyrannosaurus</li>
<li><input type="checkbox">Tyrannosaurus</li>
<li><input type="checkbox">Tyrannosaurus</li>
</ul>

<script>
$("li").click(function (e) {
        var cb = $(this).find(":checkbox")[0];
        if (e.target != cb) cb.checked = !cb.checked;
        $(this).toggleClass("selected", cb.checked);
    });
</script>

Upvotes: 0

Views: 605

Answers (3)

PinkTurtle
PinkTurtle

Reputation: 7041

You should be aware that plain HTML can achieve the label does toggle box behavior too.

But you need to emulate the class toggling on parent node.

$("input[type=\"checkbox\"]").on("change", function() {
    $(this).parent().toggleClass("selected", $(this).prop("checked"));
});

SNIPPET ALTERNATIVE Selecting checkboxes on li clicks instead

$("li").click(function(e) {
  var checked = !$(this).children("input").first().prop("checked");
  $(this).children("input").first().prop("checked", checked);
  $(this).toggleClass("selected", checked);
  e.preventDefault();
});
.selected {
  background: black;
  color: white;
}
li,
input,
label {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input id="cb1" type="checkbox">
    <label for="cb1">Tyrannosaurus</label>
  </li>
  <li>
    <input id="cb2" type="checkbox">
    <label for="cb2">Tyrannosaurus</label>
  </li>
  <li>
    <input id="cb3" type="checkbox">
    <label for="cb3">Tyrannosaurus</label>
  </li>
  <li>
    <input id="cb4" type="checkbox">
    <label for="cb4">Tyrannosaurus</label>
  </li>
  <li>
    <input id="cb5" type="checkbox">
    <label for="cb5">Tyrannosaurus</label>
  </li>
  <li>
    <input id="cb6" type="checkbox">
    <label for="cb6">Tyrannosaurus</label>
  </li>
</ul>

Upvotes: 0

Gaurav Jariwala
Gaurav Jariwala

Reputation: 523

Try Following jQuery :

jQuery('ul li').click(function () {
    //alert("hii");
  if (jQuery(this).find('input[type="checkbox"]').is(":checked")) {

    jQuery(this).find('input[type="checkbox"]').attr("checked", false);
  }
  else {
      jQuery(this).find('input[type="checkbox"]').prop("checked", true);
  }

   alert(jQuery(this).find('input[type="checkbox"]').is(":checked"));
});


jQuery('input[type=checkbox]').click(function (e) {
     e.stopPropagation();
 });

And Here is Your FIDDLE DEMO

Upvotes: 1

Steven Kaspar
Steven Kaspar

Reputation: 1187

I would use a different selector

https://jsfiddle.net/stevenkaspar/43dnggja/

$("li").on('click',function (e) {
   var cb = $(this).find("input[type='checkbox']");
   cb.prop('checked', !cb.prop('checked'));
   $(this).toggleClass("selected", cb.checked);
});

Upvotes: 0

Related Questions