通过单击更改复选框状态但不工作答案

【问题标题】：Change checkbox status by click but else not working通过单击更改复选框状态但不工作
【发布时间】：2021-04-23 15:58:14
【问题描述】：

如果我单击一个 div 区域并选中了复选框，如果选中则显示单击警报，否则未选中则显示未选中警报。但 else 不起作用。

$("#hellofortest").on('click', function() {
  var checkbox = $(this).find('input[type=checkbox]');
  if (checkbox.prop("checked", !checkbox.prop("checked"))) {
    alert("Check box in Checked");
  } else {
    alert("Check box is Unchecked");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hellofortest">
  <div class="reg-header">
    <div class="reg-header-title">Title</div>
  </div>
  <div class="ceo-previous-data-checkbox">
    <div class="bx-item-field">
      <input type="checkbox" id="previous_info" name="previous_info" value="previous">
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

您可以使用:checked 伪选择器来检查复选框是否被选中。与 jQuery 的 is 属性一起使用，例如 checkbox.is(":checked")

$("#hellofortest").on('click', function() {
  var checkbox = $(this).find('input[type=checkbox]');
  if (checkbox.is(":checked")) {
    alert("Check box in Checked");
  } else {
    alert("Check box is Unchecked");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hellofortest">
  <div class="reg-header">
    <div class="reg-header-title">Title</div>
  </div>
  <div class="ceo-previous-data-checkbox">
    <div class="bx-item-field">
      <input type="checkbox" id="previous_info" name="previous_info" value="previous">
    </div>
  </div>
</div>

【讨论】：

当点击#hellofortest 区域时，复选框将像选中和取消选中一样工作。当点击#hellofortest area alert("Check box in Checked");再次单击时将取消选中 .and alert("Check box is Unchecked");我找不到我的答案。

【解决方案2】：

问题是因为您在if 条件中使用了prop() 的setter。这总是返回一个 jQuery 对象，该对象强制为真值，因此永远不会触发 else。

要解决此问题，请从 prop() 中删除第二个参数。现在该方法调用将从复选框上的checked 属性返回布尔值。

$("#hellofortest").on('click', function() {
  var checkbox = $(this).find('input[type=checkbox]');
  if (checkbox.prop("checked")) {
    console.log("Check box is Checked");
  } else {
    console.log("Check box is Unchecked");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hellofortest">
  <div class="reg-header">
    <div class="reg-header-title">Title</div>
  </div>
  <div class="ceo-previous-data-checkbox">
    <div class="bx-item-field">
      <input type="checkbox" id="previous_info" name="previous_info" value="previous">
    </div>
  </div>
</div>

【讨论】：

当点击#hellofortest 区域时，复选框将像选中和取消选中一样工作。当点击#hellofortest area alert("Check box in Checked");再次单击时将取消选中 .and alert("Check box is Unchecked");我找不到我的答案。

【解决方案3】：

此代码对我有用：

$("#hellofortest").on('click', function() {
  var checkbox = $(this).find('input[type=checkbox]');
  checkbox.prop("checked", !checkbox.prop("checked"))
  if (checkbox.is(":checked")) {
    alert("Check box in Checked");
  } else {
    alert("Check box is Unchecked");
  }
});

另一个答案：

$(".markerDiv").click(function (e) {    
    if (!$(e.target).is('input:checkbox')) {
        var $checkbox = $(this).find('input:checkbox');
        $checkbox.prop('checked', !$checkbox.prop('checked'));
    }
});

谢谢你们。 Rory McCrossan 和 Ajith Gopi。

【讨论】：