HTML5网页设计

jQuery

jQuery操作复选框全选、全不选、反选、提交

时间:2016-01-29 17:26来自:未知作者:user点击:
首先需要导入jQuery库文件,具体方发如下: HTML代码: form method=post action= 你爱好的运动是? br/ input type=checkbox name=items value=足球/足球input type=checkbox name=items value=篮球/篮球input type=checkbox name=items value=羽毛球/羽毛

首先需要导入jQuery库文件,具体方发如下:

HTML代码

<form method="post" action="">
   你爱好的运动是?
   <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="乒乓球"/>乒乓球
   <br/>
    <input type="button" id="CheckedAll" value="全 选"/>
    <input type="button" id="CheckedNo" value="全不选"/>
    <input type="button" id="CheckedRev" value="反 选"/> 

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

 

JS代码:

$(function() {
    //全选
    $("#CheckedAll").click(function() {
        $('[name=items]:checkbox').attr('checked', true);
    });
    $('[name=items]:checkbox').click(function() {
        //定义一个临时变量,避免重复使用同一个选择器选择页面中的元素,提升程序效率。
        var $tmp = $('[name=items]:checkbox');
        //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
        $('#CheckedAll').attr('checked', $tmp.length == $tmp.filter(':checked').length);

        /*
            //一行做过多的事情需要写更多注释。复杂选择器还可能影响效率。因此不推荐如下写法。
            $('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length);
        */
    });
    //全不选
    $("#CheckedNo").click(function() {
        $('[type=checkbox]:checkbox').attr('checked', false);
    });
    //反选
    $("#CheckedRev").click(function() {
        $('[name=items]:checkbox').each(function() {
            //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
            //$(this).attr("checked", !$(this).attr("checked"));
            //$(this).prop("checked", !$(this).prop("checked"));

            //直接使用JS原生代码,简单实用
            this.checked = !this.checked;
        });
    });
    //输出值
    $("#send").click(function() {
        var str = "你选中的是:\r\n";
        $('[name=items]:checkbox:checked').each(function() {
            str += $(this).val() + "\r\n";
        })
        alert(str);
    });
})

当前文章地址:http://www.shejicool.com/web/jquery/649.html

阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐