我的脚本工作非常好,直到我添加(#check_all),我的复选框不起作用,但是它们分开工作正常。我找不到问题,请帮忙。
我的剧本
<script type="text/javascript">
$(document).ready(function(){
$(".bt").click(function(){
$(".select_box").hide('fast');
if ($(this).next('.select_box').is(':visible')){
$(this).next(".select_box").hide('fast');
}
else{
$(this).next(".select_box").fadeIn('fast');
}
});
$(document).click(function() {
$(".select_box").hide();
});
$(".bt,.select_box").click(function(e) {
e.stopPropagation();
return false;
});
$('#check_all').click(function(){
$(this).parents('div:eq(0)').find(':checkbox').attr('checked', this.checked);
});
});
</script>
HTML
<a class="bt" href="#">[X]</a>
<div class="select_box" style="display:none;border:1px solid;">
<input id="check_entite" type="checkbox" />(Select All)<br />
<input type="checkbox" />1<br />
<input type="checkbox" />2<br />
</div>
<br><br>
<a class="bt" href="#">[X]</a>
<div class="select_box" style="display:none;border:1px solid;">
<input id="check_all" type="checkbox" />(Select All)<br />
<input type="checkbox" />1<br />
<input type="checkbox" />2<br />
</div>
答案 0 :(得分:0)
$(this).closest('div').find(':checkbox').attr('checked', this.checked);
答案 1 :(得分:0)
请参阅:Sample
$(document).ready(function () {
$(".bt").click(function (e) {
$(".select_box").hide('fast');
if ($(this).next('.select_box').is(':visible')) {
$(this).next(".select_box").hide('fast');
} else {
$(this).next(".select_box").fadeIn('fast');
}
e.stopPropagation();
});
$(document).click(function (e) {
$(".select_box").hide();
});
$('.select_box').click(function (e) {
e.stopPropagation();
});
$('#check_all,#check_entite').click(function (e) {
$(this).siblings(':checkbox').prop('checked', this.checked);
e.stopPropagation();
});
});
答案 2 :(得分:0)
我认为原因不是js,实际上你的逻辑过于复杂,你应该重新组织它。试试这个或查看结果here:
<script type="text/javascript">
$(document).ready(function(){
$(".bt").click(function(){
$(".select_box").hide('fast');
if ($(this).next('.select_box').is(':visible')){
$(this).next(".select_box").hide('fast');
}
else{
$(this).next(".select_box").fadeIn('fast');
}
});
$(document).click(function() {
$(".select_box").hide();
});
$(".bt,.select_box").click(function(e) {
e.stopPropagation();
return false;
});
$('#check_all').click(function(){
$(this).parents('div:eq(0)').find(':checkbox').attr('checked', this.checked);
e.stopPropagation();
return false;
});
});
答案 3 :(得分:0)
你想要完成什么:
$(".bt,.select_box").click(function(e) {
e.stopPropagation();
return false;
});
这是一个有效版本:JSFiddle
$(document).ready(function () {
$(".bt").click(function (e) {
$(".select_box").hide('fast');
if ($(this).next('.select_box').is(':visible')) {
$(this).next(".select_box").hide('fast');
} else {
$(this).next(".select_box").fadeIn('fast');
}
return false;
});
$(document).click(function () {
$(".select_box").hide();
});
$('.check_all').click(function () {
var checked = ($(this).prop('checked'));
$(this).parent('div').find(':checkbox').prop('checked', checked);
});
});