jquery选中并取消选中所有操作
jquery check and uncheck all with action
我有更多的复选框输入,当用户点击这个时,它会调用函数"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);
}
}
我认为你可以做到:
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;
});
演示
将复选框的属性设置为选中不会自动为您伪造点击事件!因为您将这些boxclick函数调用放在一些"onclick"处理程序中,所以您必须触发一个假点击事件,以便您的javascript认为它点击了所有的框。要触发假点击事件,请使用$('#whatst').trigger('click'),例如:
$('input[name*=''selected'']').trigger('click');
如果你想勾选/取消勾选所有功能,你必须说"好的,主复选框,无论何时我被勾选或取消勾选,请倾听。当这种情况发生时,请将我的从属框(页面上的其他框)的勾选属性设置为匹配主框的当前勾选属性。"类似这样:
function checkAllorUncheckAll(event){
var chiefCheckbx = event.currentTarget;
var myBoxes = $('input[name*=''selected'']');
myBoxes.prop( "checked", $(chiefCheckbx).prop("checked") ).trigger('click');
}
$('#masterCheckBox').on('change',checkAllorUncheckAll);
我猜
$('input[name*=''selected'']').attr('checked', this.checked).trigger('click');
应该在这里完成
演示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>
相关文章:
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- Jquery未定义函数正在停止其他操作
- 如何动态操作jquery可拖动UL元素的内容
- 加载更多操作 jquery
- MVC - 在 ajax 调用中操作 Jquery 插件属性
- 使用媒体查询来操作 jQuery 手风琴
- 是否可以将一组类存储在内存中,以便我可以在页面上显示它们之前对它们执行操作?(JQuery)
- 正在操作JQuery.text()输出
- 单击操作 Jquery 不起作用
- 未定义ID/No操作Jquery
- 如何操作jquery-bootgrid格式化程序中的元素
- 操作 jQuery 使用输入创建的输入
- 使用哪种拖放操作?jQuery可拖放还是HTML5原生拖放?或者其他的
- 操作jQuery节点的文本值
- 使用底层客户端JSON数据连接、构建和操作JQuery UI
- 操作jquery集合
- 操作jQuery对象而不改变html元素
- 如果输入字段在数组中找到值,请执行此操作(jQuery/Javascript)