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>