1

我有一个输出图像的 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 时，我将如何将复选框设置为已选中？

提前感谢您的帮助。

4

3 回答 3

4

div您的选择器错误，您的标记中没有 ID 为的元素，您可以使用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() {
于 2012-10-25T00:54:05.053 回答
0

假设每个 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()方法将通过并抓取每个复选框的每个父级并将单击事件分配给它以切换相关复选框的选中状态。

于 2012-10-25T00:58:19.137 回答
0

为什么要重新发明轮子！

单击时的HTML 标签元素将更改复选框状态。改用标签，不需要 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>

​</p>

于 2012-10-25T01:02:37.027 回答