Question

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

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

这是我到目前为止所做的：

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时，如何将复选框设置为选中？

感谢您提前提供任何帮助。

Answer 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() {

Answer 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()方法将遍历并抓取每个复选框的每个父级，并将click事件分配给它以切换相关复选框的已检查状态。

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

更改父div的复选框attr onclick

3 个答案: