时间戳

首页 > 解决方案 > 通过单击更改复选框状态但不工作

javascript - 通过单击更改复选框状态但不工作

问题描述

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

$("#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>

标签： javascripthtmljquery

解决方案

您可以使用: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>

推荐阅读