Jquery checkbox全选,反选,全不选实例

简介: $(function() { //全选 $("#checkAll").click(function() { $("[name='items']:checkbox").
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="</script'>http://www.bannei.com/site_media/js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
        $(function() {
            //全选
            $("#checkAll").click(function() {
                $("[name='items']:checkbox").attr("checked", true);


            });
            //反选
            $("#checkOpp").click(function() {
                $("[name='items']:checkbox").each(function() {

                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });
            //全不选
            $("#checkNO").click(function() { $("[name='items']:checkbox").attr("checked", false); });


            $("#SubmitID").click(function() {
                var Str = "你选中的是:\n\r";
                $("[name='items']:checkbox:checked").each(function() {
                    Str += $(this).val() + "\n\r";
                });
                alert(Str);
            });


        });
    </script>

</head>
<body>
    <form>
    <fieldset>
        <legend>你爱好的运动是?</legend>
        <div id="DIV1">
            <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="checkbox" name="items" value="踢毽子" />踢毽子
            <input type="checkbox" name="items" value="俯卧撑" />俯卧撑
            <input type="checkbox" name="items" value="羽毛球" />羽毛球
        </div>
        <br>
        <input type="button" value="全选" id="checkAll" />
        <input type="button" value="反选" id="checkOpp" />
        <input type="button" value="全不选" id="checkNO" />
        <input type="button" value="取值" id="SubmitID" />
    </fieldset>
    </form>
</body>
</html>

  

目录
相关文章
|
JavaScript 前端开发 容器
使用 jQuery 中的 this 实例
使用 jQuery 中的 this 实例
47 1
|
JavaScript 前端开发
jQuery 实例
jQuery 实例
50 3
|
JavaScript 前端开发 容器
使用 jQuery 中的 this 实例
使用 jQuery 中的 this 实例
102 0
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
193 0
|
JavaScript 前端开发
jquery实现二级导航下拉菜单效果实例
jquery实现二级导航下拉菜单效果实例
219 0
|
JavaScript
jQuery数据结构渲染(4):复选框checkbox赋值
jQuery数据结构渲染(4):复选框checkbox赋值
129 1
|
JavaScript
jQuery 复选框 checkbox 取值和赋值
jQuery 复选框 checkbox 取值和赋值
242 0
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
210 0
|
JavaScript
jQuery取消checkbox选中状态
jQuery取消checkbox选中状态
112 0
|
前端开发 JavaScript API
jquery实战第一讲---概述及其入门实例
       就在5月28号周四下午五点的时候,接到xxx姐姐的电话,您是xxx吗?准备一下,周五上午八点半去远洋面试,一路风尘仆仆,颠颠簸簸,由于小编晕车,带着晕晕乎乎的脑子,小编就稀里糊涂的去面试了,温馨提醒,晕车的小伙伴家中常备晕车药,关于远洋面试的一些总结,小编会后续在博客中贴出,希望对有需要的小伙伴一些帮助,通过面试发现面试官大量的提问jquery的相关知识,那时年少,学习jquery的时候,想起来就是一把辛酸泪,于是,小编励志再把JQuery的相关知识复习一遍,把相关的知识点总结到博客中,欢迎不同意见的小伙伴一起讨论交流。
1331 0