爱玺玺

爱玺玺的生活日记本。wx:lb87626

jquery实现复选框全选 全部取消 反选功能

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>jquery</title>

<script type="text/javascript" src="jquery-1.8.2.js"></script>

<script type="text/javascript">

window.onload=function(){

$("#setall").click(function(){

   $(".c").attr("checked",true);

})

$("#cancelall").click(function(){

   $(".c").attr("checked",false);

})

$("#reverse").click(function(){

    for(var i=0;i<$(".c").length;i++){

     var ochk=$(".c:eq("+i+")");

        var flag=ochk.attr("checked");

        flag?ochk.attr("checked",false):ochk.attr("checked",true);

        /*if(flag){

         $(".c:eq("+i+")").attr("checked",false);

        }else{

         $(".c:eq("+i+")").attr("checked",true);

        }*/

    }

})

}

</script>

<style type="text/css">

.red{color: #f00}

</style>

</head>

<body>

    <input type="checkbox" name="c">

    <input type="checkbox" name="c">

    <input type="checkbox" name="c">

    <input type="checkbox" name="c">

    <input type="checkbox" name="c">

    <input type="checkbox" name="c">

    <input type="checkbox" name="c">

<br/>

<input type="button" id="setall" value="全选"/>

<input type="button" id="cancelall" value="取消"/>

<input type="button" id="reverse" value="反选"/>

</body>

</html>


发表评论:

Powered By Z-BlogPHP 1.4 Deeplue Build 150101

Copyright Your WebSite.Some Rights Reserved.

蜀ICP备11021721号-5