3

我有具有图像、标签和输入复选框的 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 />
4

7 回答 7

4

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

$('.markerDiv').on('click', function(){
   var checkbox = $(this).children('input[type="checkbox"]');
   checkbox.prop('checked', !checkbox.prop('checked'));
});
于 2013-07-04T08:53:41.087 回答
4

您可以在不编写任何 javaScript/jQuery 方法的情况下做到这一点。

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

div {
  background: red;
  padding: 10px 40px;
}
<label for="myCheck">
  <div>
    <input id="myCheck" type="checkbox" />Remember Me!
  </div>
</label>

于 2016-05-08T19:17:01.363 回答
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状态，而不是当前状态。

从文档中：

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

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

希望有道理，

这是一个小提琴

于 2013-07-04T08:59:57.310 回答
2

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

或.attr使用attr.('checked','checked')or .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/

于 2013-07-04T08:48:34.647 回答
1

按照您在本博客中的指导使用道具。由于您的复选框在 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();
 });
于 2013-07-04T09:10:54.480 回答
0

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/

于 2013-07-04T08:44:46.923 回答
0

我遵循了 TecHunter 和 khurram 的建议。

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

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
});
于 2013-07-04T15:37:08.763 回答