复选框没有像我期望的那样被更改答案

【问题标题】：Check box not being changed as I would expect复选框没有像我期望的那样被更改
【发布时间】：2017-03-10 05:32:59
【问题描述】：

我正在尝试制作一个简单的小部件，允许用户选择复选框或整个 div 以更改其值。我有以下代码：

$(document).ready(function() {
  $(document).on("click", ".inputCheck", function(event) {
    event.stopImmediatePropagation();
    event.preventDefault();
    $(this).closest(".outter").trigger("click");
  });

  $(document).on("click", ".outter", function(event) {
    console.log("inside");
    event.stopImmediatePropagation();
    event.preventDefault();
    var $checkBox = $(this).find("input");
    $(this).removeClass("selected");
    $checkBox.prop("checked", !$checkBox.prop("checked"));

    if ($checkBox.prop("checked"))
      $(this).addClass("selected");
  });
});

.outter {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 1px;
}

.outter:hover,
.inputCheck:hover {
  cursor: pointer;
}

<!DOCTYPE HTML>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
  <div class="outter">
    <input class="inputCheck" type="checkbox">
    <div>This is a test</div>
  </div>
</body>
</html>

选择DIV时，它正常工作。复选框更改值并将新类“选定”添加到 .outter 类。当复选框被选中时，我尝试停止所有默认值和传播，然后触发与选择 div 相同的代码来更改类值。但是复选框保持不变。谁能告诉我为什么这不起作用以及如何解决它？

谢谢

【问题讨论】：

你的选择器错误，输入元素的类是inputCheck而不是inputCheckBox
哎呀，等一下，我会改变它。不过我还是觉得有问题
是的，它仍然无法正常工作，对不起，在我无法让它在其他代码中工作后，我敲了这个例子......
请在代码sn-p中添加。
jsfiddle.net/wq56t9bo/1

标签： javascript jquery html

【解决方案1】：

你不需要停止传播或任何事情。您可以检查单击是否在输入上，然后更改输入检查状态，如下所示。对输入的点击将自动传播到父 div。您可以使用event.target 检查点击来源并进行必要的操作。

$(document).ready(function() {
  $(".outter").click(function(event) {
    console.log('clicked');
    var $checkBox = $(this).find("input");
    $(this).removeClass("selected");
    if (!$(event.target).is($checkBox)) {
      $checkBox.prop("checked", !$checkBox.prop("checked"));
    }
    if ($checkBox.prop("checked"))
      $(this).addClass("selected");
    event.stopPropagation();
  });
});

.outter {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 1px;
}

.outter:hover,
.inputCheck:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outter">
  <input class="inputCheck" type="checkbox" />
  <div id="testIt">This is a test</div>
</div>

【讨论】：

嗨 Rejith，太好了。为什么原来的不起作用你知道吗？
@xenophon 原始代码的问题在于，当您单击标记为选中的输入时，会触发外部单击。该函数再次切换输入的选中属性。这意味着输入的更改将发生两次。
但是为什么 preventDefault 和 stopPropagation 函数不能阻止这个？
@xenophon stopPropagation 停止传播事件。但是你有代码$(this).closest(".outter").trigger("click");，它将执行下面的代码。

【解决方案2】：

$(document).ready(function() {
  $(document).on("click", ".inputCheck", function(event) {
    event.stopImmediatePropagation();
    $(this).closest(".outter").trigger("click");
  });

  $(document).on("click", ".outter", function(event) {
    console.log("inside");
    event.stopImmediatePropagation();
    var $checkBox = $(this).find("input");
   
    

    if ($checkBox.prop("checked"))
      $(this).addClass("selected");
    else
       $(this).removeClass("selected");
  });
});

.outter {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 1px;
}

.outter:hover,
.inputCheck:hover {
  cursor: pointer;
}

<!DOCTYPE HTML>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
  <div class="outter">
    <input class="inputCheck" type="checkbox">
    <div>This is a test</div>
  </div>
</body>
</html>

【讨论】：