JQuery实现全选和反选

来源:互联网 发布:mongodb使用场景 知乎 编辑:程序博客网 时间:2024/05/19 04:07

<!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">
        function invertSelectType() {


            //这里重写反选和全选方法,因为再次使用原先的会导致页面上的选项也会被选  
            var ids = $("input[name='stu']");
            for (var i = 0; i < ids.length; i++) {
                if (ids[i].checked == true) {
                    ids[i].checked = "";
                } else {
                    ids[i].checked = "checked";
                }
            }


        }


        //全选


        function allSelectType() {
            var ids = $("input[name='stu']");
            for (var i = 0; i < ids.length; i++) {
                ids[i].checked = "checked";
            }


        }
    </script>


</head>
<body>


<p style="text-align:center; padding-top:15px"> 


选择班级:


<select name="claId" id="claId" style="color:#999999">  


  <option value="0" style="color:#999999">==选择==</option>  


    <option value=1 style="color:#000000">药学1班</option> 


    <option value=2 style="color:#000000">药学2班</option>  


</select>


</p>


<p></p>


<p style="text-align:center; padding-top:15px">  选择需要导出的选项:</br>


   <input type="checkbox" name="stu" id="a" value="考生学号">考生学号&nbsp;&nbsp; 


  <input type="checkbox" name="stu" id="a" value="考生姓名">考生姓名</br> 


  <input type="checkbox" name="stu" id="a" value="考生班级">考生班级&nbsp;&nbsp; 


  <input type="checkbox" name="stu" id="a" value="考生性别">考生性别</br> 


  <input type="checkbox" name="stu" id="a" value="考试得分">考试得分&nbsp;&nbsp;


  <input type="checkbox" name="stu" id="a" value="测试时间">测试时间</br> 


  <input type="checkbox" name="stu" id="a" value="交卷时间">交卷时间&nbsp;&nbsp; 


  <input type="checkbox" name="stu" id="a" value="考试用时">考试用时</br>


</p>


<p style="text-align:center; padding-top:15px">  


  <input type="button" value="全选" onclick="allSelectType();"/>  


  <input type="button" value="反选" onclick="invertSelectType();"/>


</p>


</body>


</html>

原创粉丝点击