jQuery的检查，并取消所有动作

Question

我有更多的复选框，输入调用函数“boxclick”当这个用户点击：

<input id="1box" type="checkbox" name="selected[]" onclick="boxclick(this,'1')"> 
<input id="2box" type="checkbox" name="selected[]" onclick="boxclick(this,'2')"> 
<input id="3box" type="checkbox" name="selected[]" onclick="boxclick(this,'3')"> 
<input id="4box" type="checkbox" name="selected[]" onclick="boxclick(this,'4')"> 

对于选择/取消所有我用简单的jQuery脚本：

<input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" checked="checked"> 

我的问题是当我检查/取消选中所有功能“boxclick”不运行。

// == a checkbox has been clicked == 
    function boxclick(box,category) { 
    if (box.checked) { 
     show(category); 
    } else { 
     hide(category); 
    } 
    } 

Answer 1

将复选框的属性设置为勾选不会自动为您假冒点击事件！由于您在某些“onclick”处理程序中放置了这些boxclick函数调用，因此您必须触发一个虚假的单击事件才能让您的javascript认为它在所有框中都点击了点击了。为了触发虚假点击的事件使用$（“＃不管”）的触发器（“点击”），例如：

$('input[name*=\'selected\']').trigger('click'); 

如果你想查看/取消所有功能，你必须说“OK，主复选框，请如果发生这种情况，请将我的奴隶盒（您的其他盒子在页面上）的检查属性设置为匹配主人的当前选中的属性。就像这样：

function checkAllorUncheckAll(event){ 

    var chiefCheckbx = event.currentTarget; 
    var myBoxes = $('input[name*=\'selected\']'); 

    myBoxes.prop("checked", $(chiefCheckbx).prop("checked")).trigger('click'); 

} 

$('#masterCheckBox').on('change',checkAllorUncheckAll); 

Answer 2

我认为你可以这样做：

HTML

<input id="1box" type="checkbox" name="selected[]"> 
<input id="2box" type="checkbox" name="selected[]"> 
<input id="3box" type="checkbox" name="selected[]"> 
<input id="4box" type="checkbox" name="selected[]"> 

jQuery的

如果你想检查/取消所有checkbox：

var checkboxes = $('input[type=checkbox][name^=selected]'); 
checkboxes.on('click', function() { 
    checkboxes.prop('checked', this.checked); 
}); 

如果你想选择在任何一个时间：

var checkboxes = $('input[type=checkbox][name^=selected]'); 
checkboxes.on('click', function() { 
    checkboxes.prop('checked', false); 
    this.checked = !this.checked; 
});​ 

DEMO

Answer 3

我猜

$('input[name*=\'selected\']').attr('checked', this.checked).trigger('click');

应该在这里做的伎俩

Answer 4

演示 http://jsfiddle.net/H37cb/

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script> 

<script type="text/javascript"> 
$(document).ready(function(){ 

$('input[name="all"],input[name="title"]').bind('click', function(){ 
var status = $(this).is(':checked'); 
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status); 
}); 

}); 
</script> 




<div id="wrapper"> 
<li style="margin-top: 20px"> 
    <input type="checkbox" name="all" id="all" /> <label for='all'>All</label> 
    <ul> 
    <li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label> 
    <ul> 
    <li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li> 
    <li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li> 
    <li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li> 
    <li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li> 
    </ul> 
    </li> 
    </ul> 
    <ul> 
    <li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label> 
    <ul> 
    <li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li> 
    <li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li> 
    <li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li> 
    </ul> 
    </li> 
    </ul> 
</li> 
</div>