更改复选框属性onclick父div

我有一个PHP脚本输出图像，此刻选择一个图像，你必须单击一个复选框。我想改变这个，这样当父母div被点击时，复选框被设置为检查。更改复选框属性onclick父div

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

这是我到目前为止有：（通过PHP的输出，这样的倍数）

JQuery的

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

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

HTML

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

那么我将如何设置的复选框为是否以不会导致其他复选框之间冲突的方式点击父分支时检查？

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

来源

2012-10-25 Jamie Turner

有每格一个以上的复选框？ –

在每个父分区中只有一个复选框@ Kevin –

~~你的选择是错误的存在，在您的标记，~~ 的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-25 00:54:05 undefined

对不起，忘了在这里输入示例html的id属性，我现在要做。 @不详。 –

这不会导致问题，因为php输出的每个div都会有相同的ID？ –

@ user1636816：它应该很重要，因为该解决方案不使用ID，但让您的PHP脚本输出带有非唯一ID的HTML是不好的做法，您应该修复它（在PHP端）。 –

假设有每格不超过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事件以切换相关复选框的选中状态。

来源

2012-10-25 00:58:19

为什么要重新发明轮子！

点击后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>

来源

2012-10-25 01:02:37 epascarello

+1但我不会把复选框放在标签内 –

更改复选框属性onclick父div

回答

相关问题