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

change checkbox status (true/ false) on div click

提问by Toxic

i have div that have image, label and input check-box. what i like when i click on div, it change check-box status from true to false and vise verse

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

jQuery

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

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 />

采纳答案by Toxic

use prop as you been guide through out this blog. As your check-box is in div and because div is registered with click event, it may stop you using check-box. Use e.stopPropagation to make check-box itself click-able too.

使用 prop 作为您在本博客中的指导。由于您的复选框在 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();
 });

回答by Ilu

You can select checkbox with children('input[type="checkbox"]')selector and change its state with the following code

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

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

回答by JerryGoyal

You can do it without writing any javaScript/jQuery method.

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

Just wrap div inside a label:-

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

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

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

回答by billyonecan

The simplest solution would be to put the checkbox inside of the label. That way, no JS/jQuery is required.

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

If you can't/don't want to do that, you can do the following:-

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

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

This is pretty much the same as what you already had. Except it uses prop(). The reason yours didn't work properly is because when you use .attr()to get the checked property, it refers to the defaultCheckedstate, and not the current state.

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

From the documentation:

从文档：

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox.

然而，关于checked 属性要记住的最重要的概念是它不对应于checked 属性。该属性实际上对应于 defaultChecked 属性，应该仅用于设置复选框的初始值。

The only other thing in there is the ifstatement which checks if you clicked on the checkbox itself. The default behaviour interferes with the click handler, so the simplest solution is to only check the checkbox programatically when the checkbox isn't clicked, otherwise leave it to its default behaviour.

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

Hope that makes sense,

希望有道理，

Here's a fiddle

这是一把小提琴

回答by TecHunter

You need to use .prop('checked',true)instead of .attr(). check it out here : http://jsfiddle.net/techunter/VQ5E2/

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

Or with .attruse attr.('checked','checked')or .removeAttr('checked'). here : http://jsfiddle.net/techunter/SaRmW/

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

Optimized code here :

优化代码在这里：

$(".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/

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

回答by Maxim Zhukov

There is a property 'for' in HTML element 'label'.

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>

Here is an example: http://jsfiddle.net/bH3jJ/

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

You have to set 'id' attribute in your 'input[type="checkbox"]' element and then pass this id into property 'for' in 'label' element.

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

Edit:

编辑：

If do you like to make in with jQuery, here is solution:

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

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

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

with your HTML markup:

使用您的 HTML 标记：

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

Example: http://jsfiddle.net/QgEL8/1/

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

回答by Toxic

I have followed TecHunter and khurram suggestion.

我遵循了 TecHunter 和 khurram 的建议。

1) don't mix attribute and properties by using only properties attribute but using only this will block input check-box click-able behavior so

1) 不要只使用 properties 属性来混合属性和属性，而只使用 this 会阻止输入复选框的可点击行为，所以

2) so use separate function; register input[type=checkbox] with click event, then use e.stopPropagation() which will ensure running of check-box clickable itself too

2) 所以使用单独的函数；使用点击事件注册 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
});