• 常用JQuery效果演示-复选框全选和反选效果

    发布:51Code 时间: 2017-10-11 13:31

  • [ 理论知识] 我们在实际开发应用程序的过程中,经常会遇到复选框全选和反选的效果需求,本文小博老师就为大家演示一下,如何使用JQuery框架实现复选框全选和反选的效果。 [ 步骤解...

  • [理论知识]

           我们在实际开发应用程序的过程中,经常会遇到复选框全选和反选的效果需求,本文小博老师就为大家演示一下,如何使用JQuery框架实现复选框全选和反选的效果。

        [步骤解读一]界面布局

           首先我们创建一个HTML页面,核心代码如下:

    <body>
     
           <div align="center" id="div_document">
        <div align="left" id="div_document_content">
                  <table align="center" border="1px" cellpadding="2px" cellspacing="2px">
              <tr>
                   <td><input type="checkbox" id="cbxAll" /></td>
                    <td>课程名称</td>
                    <td>课程时间</td>
                </tr>
                <tr>
                   <td><input type="checkbox" name="cbxGroup" /></td>
                    <td>JavaSE标准版</td>
                    <td>160课时</td>
                </tr>
                <tr>
                   <td><input type="checkbox" name="cbxGroup" /></td>
                    <td>JavaWeb设计</td>
                    <td>96课时</td>
                </tr>
                <tr>
                   <td><input type="checkbox" name="cbxGroup" /></td>
                    <td>SQL结构化数据库</td>
                    <td>48课时</td>
                </tr>
                <tr>
                   <td><input type="checkbox" name="cbxGroup" /></td>
                    <td>JavaEE标准版</td>
                    <td>256课时</td>
                </tr>
                <tr>
                   <td><input type="checkbox" name="cbxGroup" /></td>
                    <td>Android应用</td>
                    <td>128课时</td>
                </tr>
                <tr>
                   <td><input type="checkbox" name="cbxGroup" /></td>
                    <td>就业辅导专题</td>
                    <td>32课时</td>
                </tr>
            </table>
        </div>
        </div>
     
    </body>

           使用浏览器访问,看到页面布局效果如下:

    [步骤解读二]添加全选和反选效果

           为了让用户选择选项更加方便,我们把最上边的复选框作为功能型复选框,当用户选中它时,所有的课程都自动选中,当用户取消它的选中属性后,所有的课程自动取消选中属性。

           我们为页面增加javascript代码,核心代码如下:

    <script src="script/jquery-1.4.2.min.js"></script>
    <script>
    $(document).ready(function(){
           // 为 功能复选框添加点击事件
           $("#cbxAll").click(function(){
                  // 将所有课程复选框的选中属性 设置成与功能复选框的选中属性一致
                  $(".cbxGroup").attr("checked",$(this).attr("checked"));
           });   
    });
    </script>

           通过浏览器访问,现在我们看到功能复选框的全选和反选效果就实现了:

  • 上一篇:解析Java核心技术点-Ajax验证账户名称

    下一篇:给Java开发者的10个大数据工具和框架

网站导航
Copyright(C)51Code软件开发网 2003-2015 , 沪ICP备05003035号