如何将功能应用于页面上的每个复选框？

Question

I am trying to apply a function to every checkbox on a page that shows/hides <div class="selectlist"> depending on if the checkbox is checked, this function makes all the <div class="selectlist"> on the page toggle

$("input[type=checkbox]").live('change', function() {
  if ($(this).is(':checked') == false) {
   $('#selectlist').hide();
    } else {
       $('#selectlist').show();
    }
 });     

I tried the jquery each function like this but that doesnt seem to work

    $.each($("input[type=checkbox]").live('change', function() {

        if ($(this).is(':checked') == false) {
             $('#selectlist').hide();
        } else {
             $('#selectlist').show();
        }
    }));

I know its possible to this by using a class instead of input[type=checkbox] but I want to avoid doing that

How can I make jquery change the behavior of the checkbox the user clicks?

Answer 1

If you're trying to bind an event handler to all elements verifying input[type=checkbox] , simply do

$(document).on('change', "input[type=checkbox]", function() {
    if (!this.checked) {
         $('#selectlist').hide();
    } else {
         $('#selectlist').show();
    }
});

No need to use each there : most jQuery functions work if the jQuery set contains more than one element.

Note that I use on there instead of live : after having been deprecated for a long time, live has been removed from recent versions of jQuery.

---

EDIT : discussion in comments below lead to this code :

$(document).on('change', "input[type=checkbox]", function() {
    $(this).next().toggle(this.checked);
});

Answer 2

$(document).on('change', 'input[type=checkbox]', function() {
    $('#selectlist').toggle(this.checked); 
});

ID's are uniqe , and there is no "all the <div id="selectlist"> on the page toggle", there can be only one? Use a class instead, and show us what the markup looks like !