更改父 div 的复选框 attr onclick答案

【问题标题】：Change checkbox attr onclick of parent div更改父 div 的复选框 attr onclick
【发布时间】：2012-10-15 03:12:45
【问题描述】：

我有一个输出图像的 php 脚本，此时要选择图像，您必须单击一个复选框。我想更改它，以便在单击父 div 时将复选框设置为选中。

如果我的父 div 有不同的 id，我知道该怎么做，而且这个类似乎不好，因为它会将 php 输出的所有复选框设置为真/假。

这是我目前所拥有的：

jQuery

$('#div').bind('click', function() {
   var checkbox = $(this).find(':checkbox');

    checkbox.attr('checked', !checkbox.attr('checked'));
});

HTML（由php输出，所以存在倍数。）

<div id="div" style='display:inline-block; padding:15px;' class='lifted drop-shadow-sq'>
    <img class='reflect reflect-br'  width='150px' height='150px' src=\"thumb.php?id=$id\">
        <input type='checkbox' class=\"show-man\" name=\"images[]\" value='$id'>
</div>

那么，当以不会导致任何其他复选框之间发生冲突的方式单击父 div 时，我如何将复选框设置为已选中？

提前感谢您的帮助。

【问题讨论】：

每个 DIV 是否有多个复选框？
每个父div中只有一个复选框@Kevin

标签： jquery html checkbox

【解决方案1】：

~~您的选择器错误，您的标记中没有 ID 为 div 的元素，~~您可以使用 prop 方法：

$('div').on('click', function() {
   $('input[type=checkbox]', this).prop('checked', function(i, checked){
      return !checked
   })
});

请注意，:checkbox 选择器已弃用且 ID 必须是唯一的，如果您有多个具有相同 ID 的元素，则您的标记无效并且您的 ID 选择器仅选择具有该特定 ID 的第一个元素，您应该改用类.

$('.div').on('click', function() {

【讨论】：

抱歉，忘记在此处的示例 html 中输入 id attr，我现在就这样做。 @未定义。
@user1636816 不，只有被点击的元素是事件的目标。并非所有具有该类名的元素。
你为什么要重新发明轮子，HTML 为你做这件事。对 JavaScript 的需求为零！
@undefined，从什么时候开始标签中的图像无效？在 HTML5 文档的 W3C 验证器上验证对我来说很好
在 HTML4 中也有效。这比为每个 div 添加一个点击事件要好。更好的解决方案是将点击事件放在文档级别，这样只有一个。但是标签将使表单可以通过适当的文本访问。开发人员忽略的简单 508 改进。

【解决方案2】：

假设每个 div 的复选框不超过 1 个，并且每个复选框实现相同的类，则可以使用以下 jQuery：

$('input[type=checkbox].show-man').each(function(index, value) {
    var self = $(this);
    self.parent().on("click", function() { 
        self.prop('checked', !self.prop('checked'));
    });
});

作为解释，$('input[type=checkbox].show-man') 应该抓取所有相关的复选框（因此您仍然可以在页面上拥有其他不受影响的复选框和 div）。然后each() 方法将通过并抓取每个复选框的每个父级并将点击事件分配给它以切换相关复选框的选中状态。

【讨论】：

【解决方案3】：

为什么要重新发明轮子！

HTML label element 被点击时会改变复选框的状态。使用标签代替，不需要 JavaScript。

<label for="cb" style='display:inline-block; padding:15px;' class='lifted drop-shadow-sq'>
    <img class='reflect reflect-br'  width='150px' height='150px' src=\"thumb.php?id=$id\">
        <input id="cb" type='checkbox' class=\"show-man\" name=\"images[]\" value='$id'>
</label>

【讨论】：