jQuery应用操作之---复选框

1、示例1：

<form>

    你最爱好的运动是？

    <input type="checkbox" id="CheckedAll"/>全选<br/>

    <input type="checkbox" id="CheckedNo"/>全不选<br/>

    <input type="checkbox" id="CheckedRev"/>反选<br/>

    <input type="checkbox" name="items" value="足球"/>足球

    <input type="checkbox" name="items" value="篮球"/>篮球

    <input type="checkbox" name="items" value="羽毛球"/>羽毛球

    <input type="checkbox" name="items" value="乒乓球"/>乒乓球

    <input type="button" id="send" value="提交"/>

</form>

全选：
$("#checkAll").click(function(){
　　$.("[name=items]: checkbox").attr("checked",true);
})

全不选：
$("#checkAll").click(function(){
　　$.("[name=items]: checkbox").attr("checked",false);
})

反选：
$("#checkRev").click(function(){
　　$.("[name=items]: checkbox").each(function(){
　　　　$(this).attr("checked",!$(this).attr("checked"));
　　})
})
JS原生的DOM方法比创建jQuery对象更为有效、简洁，简化后代码如下：
$("#checkRev").click(function(){
　　$.("[name=items]: checkbox").each(function(){
　　　　this.checked=!this.checked;
　　})
})

2、示例2：

<form>

    你最爱好的运动是？

    <input type="checkbox" id="CheckedAll"/>全选/全不选<br/>

    <input type="checkbox" name="items" value="足球"/>足球

    <input type="checkbox" name="items" value="篮球"/>篮球

    <input type="checkbox" name="items" value="羽毛球"/>羽毛球

    <input type="checkbox" name="items" value="乒乓球"/>乒乓球

    <input type="button" id="send" value="提交"/>

</form>

单击id为"CheckedAll"复选框后，复选框组被选中，当复选框组中有一个或者更多没有被选中时，则需要取消id为"CheckedAll"的选中状态，有如下方法实现：
a）设置一个全选中/未全选中标志位，根据标志位设置"CheckedAll"复选框选中状态
　　$("[name=items]：checkbox").click(function(){
　　　　var flag = true;
　　　　$("[name=items]:checkbox").each(function(){
　　　　　　if(!this.checked){
　　　　　　　　flag = false;
　　　　　　}
　　　　});
　　$("#CheckAll").attr("checked",flag);
})

b) 判断复选框的总数是否与选中的复选框数量相等
$("[name=items]：checkbox").click(function(){
　　var $temp = $("[name=items]:checkbox");
　　$("#CheckAll").attr("checked",$temp.length==$temp.filter(":checked").length);
})

巴特西

jQuery应用操作之---复选框

最新文章

热门文章