在 div 点击时更改复选框状态（真/假）

Question

我有具有图像、标签和输入复选框的 div。当我点击 div 时，我喜欢什么，它会将复选框状态从 true 更改为 false 和虎钳

jQuery

$(".markerDiv").click(function () {

    if ($(this).find('input:checkbox[name=markerType]').is(":checked")) {

          $(this).find('input:checkbox[name=markerType]').attr("checked", false);
    }
    else {
          $(this).find('input:checkbox[name=markerType]').attr("checked", true);
    }


 alert($(this).find('input:checkbox[name=markerType]').is(":checked"));
});

html

<div class="markerDiv"  id="maker_school"><label class="marker_label">School</label> <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox"  /> </div> <br />

Answer 1

您可以使用children('input[type="checkbox"]')选择器选择复选框并使用以下代码更改其状态

$('.markerDiv').on('click', function(){
   var checkbox = $(this).children('input[type="checkbox"]');
   checkbox.prop('checked', !checkbox.prop('checked'));
});

Answer 2

您无需编写任何 javaScript/jQuery 方法即可完成。

只需将 div 包裹在标签内：-

div {
  background: red;
  padding: 10px 40px;
}

<label for="myCheck">
  <div>
    <input id="myCheck" type="checkbox" />Remember Me!
  </div>
</label>

Answer 3

最简单的解决方案是将复选框放在标签内。这样，就不需要 JS/jQuery。

如果您不能/不想这样做，您可以执行以下操作：-

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

这与您已经拥有的几乎相同。除了它使用prop()。您的无法正常工作的原因是因为当您使用.attr() 获取选中的属性时，它指的是defaultChecked 状态，而不是当前状态。

来自documentation：

尽管如此，关于检查的最重要的概念是要记住的 属性是它不对应于选中的属性。这 属性实际上对应于 defaultChecked 属性和 应该只用于设置复选框的初始值。

其中唯一的另一件事是if 语句，它检查您是否单击了复选框本身。默认行为会干扰单击处理程序，因此最简单的解决方案是仅在未单击复选框时以编程方式检查复选框，否则将其保留为默认行为。

希望这是有道理的，

Here's a fiddle

Answer 4

您需要使用.prop('checked',true) 而不是.attr()。在这里查看：http://jsfiddle.net/techunter/VQ5E2/

或与.attr 一起使用attr.('checked','checked') 或.removeAttr('checked')。这里 ： http://jsfiddle.net/techunter/SaRmW/

这里优化了代码：

$(".markerDiv").click(function () {
    var $checks = $(this).find('input:checkbox[name=markerType]');

    $checks.prop("checked", !$checks.is(":checked"));

    alert($checks.is(":checked"));
});

http://jsfiddle.net/techunter/YymBH/

Answer 5

按照您在本博客中的指导使用道具。由于您的复选框在 div 中并且因为 div 注册了点击事件，它可能会阻止您使用复选框。使用 e.stopPropagation 使复选框本身也可以点击。

$('.markerDiv').click(function () {

  if ($(this).find('input:checkbox[name=markerType]').is(":checked")) {

    $(this).find('input:checkbox[name=markerType]').attr("checked", false);
  }
  else {
      $(this).find('input:checkbox[name=markerType]').prop("checked", true);
  }

   alert($(this).find('input:checkbox[name=markerType]').is(":checked"));
});


 $('input[type=checkbox]').click(function (e) {
     e.stopPropagation();
 });

Answer 6

HTML 元素 'label' 中有一个属性 'for'。

<div class="markerDiv"  id="maker_school">
    <label class="marker_label" for="markerType">School</label> 
    <input class="marker_ckeckbox" id="markerType" name="markerType" value="school" type="checkbox"  /> 
</div>

这里是一个例子：http://jsfiddle.net/bH3jJ/

您必须在 'input[type="checkbox"]' 元素中设置 'id' 属性，然后将此 id 传递给 'label' 元素中的属性 'for'。

编辑：

如果你喜欢使用 jQuery，这里是解决方案：

$(".markerDiv").click(function () { 
    var checkBox = $('input[name=markerType]', this);

    $(checkBox).prop('checked', !checkBox.is(':checked'));
});

使用您的 HTML 标记：

<div class="markerDiv" id="maker_school">
    <label class="marker_label">School</label>
    <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox"  />
</div>

示例：http://jsfiddle.net/QgEL8/1/

Answer 7

我遵循了 TecHunter 和 khurram 的建议。

1) 不要通过仅使用属性属性来混合属性和属性，但仅使用它会阻止输入复选框可点击行为，因此

2) 所以使用单独的函数；使用 click 事件注册 input[type=checkbox]，然后使用 e.stopPropagation() 这将确保复选框可点击本身的运行

$('.markerDiv').click(function () {

    var $checks = $(this).find('input:checkbox[name=markerType]');

     $checks.prop("checked", !$checks.is(":checked"));

       //process my data here

 });

$('input[type=checkbox]').click(function (e) {

    e.stopPropagation();

      //process my data here
});