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

Question

我试图将一个功能应用于显示/隐藏<div class="selectlist">的页面上的每个复选框，具体取决于是否选中了该复选框，此功能使页面上的所有<div class="selectlist">

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

我尝试了jQuery这样的each函数，但这似乎不起作用

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

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

我知道通过使用class而不是input[type=checkbox]可以做到这一点，但我想避免这样做

如何使jquery更改用户单击的复选框的行为？

Answer 1

如果您尝试将事件处理程序绑定到所有验证input[type=checkbox]元素，则只需执行

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

无需在那里使用each ：如果jQuery集包含多个元素，则大多数jQuery函数each可以使用。

请注意，我on此处使用而不是live ：在长时间不赞成使用之后， live已从最新版本的jQuery中删除。

---

编辑：下面的注释中的讨论导致此代码：

$(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是uniqe ，并且没有“页面切换上的所有<div id="selectlist"> ”，只能有一个？ 请改用一个类，然后向我们展示标记的样子！