Question

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

的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

您需要使用.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 4

最简单的解决方案是将复选框放在标签内。这样，就不需要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()获取checked属性时，它指的是defaultChecked状态，而不是当前状态。

来自documentation：

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

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

希望有道理，

Here's a fiddle

Answer 5

使用道具作为您在本博客中的指导。由于您的复选框位于div中，并且因为div已在click事件中注册，因此可能会阻止您使用复选框。使用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传递给''''''元素中的'''。

修改

如果你喜欢使用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事件注册输入[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
});

在div单击时更改复选框状态（true / false）

7 个答案:

Here's a fiddle