Javascript 听复选框被选中/取消选中的正确方法是什么？

我正在使用此代码检查复选框是否选中，如果选中，则在地图上显示子菜单和特定图层：

$('input').on('change', function () {
  var x = $( 'input:checked' ).val(); // x gets the value attribute of changed checkbox
  if ($('input').is(':checked')) {
    sublayers.getSubLayer(x).show(); // shows specified layer on the map
    $('#' + x).show(); // shows id targeted submenu under the checked checkbox
  } else {
    sublayers.getSubLayer(x).hide(); // hides sublayer on the map if unchecked
    $('#' + x).hide();  // hides specific submenu
  }
});

因此，第一个复选框工作正常，而下面的复选框没有响应。更重要的是，如果我开始从下到上勾选复选框，它们会工作，但会显示符合上面一个复选框的子层。另外，取消选中不会触发任何事件。

使用$this而不是$input'

使用$this而不是$input'

使用此选项而不是“输入：已选中”

在回调中，上下文被设置为触发事件的元素。因此，当发生更改事件并调用回调时，元素存储在其中。您可以使用$this轻松确定是否选中复选框的新状态。is:checked

使用此选项而不是“input:checked”

在回调中，上下文被设置为触发事件的元素。因此，当发生更改事件并调用回调时，元素存储在其中。您可以使用$this轻松确定是否选中复选框的新状态。is:checked

使用此选项在代码中获取已单击复选框的上下文

 $('input[type="checkbox"]').on('change', function (){
            var x = this.value; // x gets the value attribute of changed checkbox
            if (this.checked){
                sublayers.getSubLayer(x).show(); // shows specified layer on the map
                $('#' + x).show(); // shows id targeted submenu under the checked checkbox
            }
            else {
                sublayers.getSubLayer(x).hide(); // hides sublayer on the map if unchecked
                $('#' + x).hide();  // hides specific submenu
            }
    });

这里，this.checked将返回true，否则返回false。

使用此选项在代码中获取单击的复选框的上下文

 $('input[type="checkbox"]').on('change', function (){
            var x = this.value; // x gets the value attribute of changed checkbox
            if (this.checked){
                sublayers.getSubLayer(x).show(); // shows specified layer on the map
                $('#' + x).show(); // shows id targeted submenu under the checked checkbox
            }
            else {
                sublayers.getSubLayer(x).hide(); // hides sublayer on the map if unchecked
                $('#' + x).hide();  // hides specific submenu
            }
    });

---

---

此处this.checked将返回true，如果checked为false，则返回true。

请包含HTML和演示。可能的重复项应在事件处理程序中使用它引用更改的输入。$'input:checked'和$'input'。is'：checked'只是从DOM中重新选择内容，实际上可能不是已更改的输入。请包括HTML和演示。可能的重复内容应在事件处理程序中使用它引用已更改的输入。$'input:checked'和$'input'.is'：checked'只是从DOM中重新选择内容，实际上可能不是已更改的输入。@AtheistP3ace，谢谢您的编辑。但是var x=$输入：选中'.val；是正确的。`因为x不需要未选中元素的值。复选框的值决定了他显示的内容，所以它必须是已更改复选框的值。$'输入：选中“仅查找所有选中的复选框。他显然使用x值来选择与当前更改的元素直接相连的元素，而不仅仅是复选框。@AtheistP3ace感谢这是problem@AlfredUC他确实也想要未检查的值，因为稍后他会检查其是否已检查，然后根据该值隐藏/显示某些内容。您的代码是错误的。@AtheistP3ace，我刚刚又检查了一遍，然后我发现您的修改是正确的。谢谢你指出我的错误。@AtheistP3ace，谢谢你的编辑。但是var x=$输入：选中'.val；是正确的。`因为x不需要未选中元素的值。复选框的值决定了他显示的内容，所以它必须是已更改复选框的值。$'输入：选中“仅查找所有选中的复选框。他显然使用x值来选择与当前更改的元素直接相连的元素，而不仅仅是复选框。@AtheistP3ace感谢这是problem@AlfredUC他确实也想要未检查的值，因为稍后他会检查其是否已检查，然后根据该值隐藏/显示某些内容。您的代码是错误的。@AtheistP3ace，我刚刚又检查了一遍，然后我发现您的修改是正确的。感谢您指出我的错误。这将很好地工作，但请注意，还有另一个问题可能会影响OP…如果在页面中添加任何其他非复选框输入元素，这将不再正常工作。将选择器更改为“输入：复选框”可以避免这种情况。@MattBrowne虽然我已更改了选择器，但我认为如果将任何其他非复选框输入元素添加到页面中，这将不再正常工作。这取决于添加的元素的值，但是无论如何，else块中的代码都会不必要地运行。在使用非jQuery属性方面做得很好——如果在分支外部重构分支内部相同的两个选择器，效果会更好。我建议val sel=subLayers.getSubLayerx.add+x，然后分支变为sel.show和sel.hideth。这将很好地工作，但请注意，还有另一个问题可能会影响OP…如果在页面中添加任何其他非复选框输入元素，这将不再正常工作。将选择器更改为“输入：复选框”可以避免这种情况。@MattBrowne虽然我已更改了选择器，但我认为如果将任何其他非复选框输入元素添加到页面中，这将不再正常工作。这取决于添加的元素的值，但是无论如何，else块中的代码都会不必要地运行。在使用非jQuery属性方面做得很好——如果在分支外部重构分支内部相同的两个选择器，效果会更好。我建议val sel=子层 rs.getSubLayerx.add+x然后分支变成sel.show和sel.hideno，使用this.checked，而不是$this.is'：checked'！不，使用this.checked，而不是$this.is'：checked'！