lundi 2 mai 2016

Materialize checkbox only "fills in" one checkbox + li script not working

I am using Materialize.

I have a row of checkboxes. Whenever I click any of the checkboxes, they always check the first checkbox, not the checkbox I clicked:

<ul>
<li><input id="myCheckbox" class="filled-in" type="checkbox"><label for="myCheckbox"></label>Tyrannosaurus Rex</li>
<li><input id="myCheckbox1" class="filled-in" type="checkbox"><label for="myCheckbox"></label>Stegasaurus</li>
<li><input id="myCheckbox2" class="filled-in" type="checkbox"><label for="myCheckbox"></label>Pteradactyl</li>
<li><input id="myCheckbox3" class="filled-in" type="checkbox"><label for="myCheckbox"></label>Triceratops</li>
<li><input id="myCheckbox4" class="filled-in" type="checkbox"><label for="myCheckbox"></label>Diplodocus</li>
<li><input id="myCheckbox5" class="filled-in" type="checkbox"><label for="myCheckbox"></label>Diplodocus</li>
<li><input id="myCheckbox6" class="filled-in" type="checkbox"><label for="myCheckbox"></label>Diplodocus</li>
<li><input id="myCheckbox7" class="filled-in" type="checkbox"><label for="myCheckbox"></label>Diplodocus</li>
</ul>

Also, I'm using the script below to automatically check the checkboxes if the li is clicked, but it doesn't check them.

<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>




Aucun commentaire:

Enregistrer un commentaire