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函数都可以工作。

请注意，我在on使用live而不是live：在被弃用了很长时间后，$(document).on('change', "input[type=checkbox]", function() { $(this).next().toggle(this.checked); });已从最新版本的jQuery中删除。

编辑：以下评论中的讨论导致了这段代码：

{{1}}

Answer 2

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

ID是唯一的，并且页面上没有“所有<div id="selectlist">切换”，只能有一个？请改用类，并向我们展示标记的样子！

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

2 个答案: