jquery 操作复选框问题集锦

时间：2010-07-18 来源：sunyimaying0925-gmail-com

1. jquery操作复选框是使用频繁的一个操作

2. 看看源码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 <!--   引入jQuery -->
 <script src="js/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function(){
     //全选
     $("#CheckedAll").click(function(){
             $('input[name=items]:checkbox').attr('checked', true);
         });

         //输出值
        $("#send").click(function(){
                var str="你选中的是：\r\n";
                $("input[name='items']:checkbox:checked").each(function(){
                        str+=$(this).val()+"\r\n";
                })
                alert(str);
        });
  })
  </script>
</head>
<body>
<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="send" value="提　交"/> 
</form>
</body>
</html>

3. 对于复选框选中的测试

input[name='items'][checked=true]    ff3.6 ie7都可以运行
input[name='items']:checkbox[checked=true]    ff3.6 ie7都可以运行 
input[name='items'][checked]    ff3.6不可以 ie7可以运行
input[name='items']:checkbox[checked]    ff3.6 ie7 都可以运行
input[name='items'][checked=checked]    ff3.6 ie7 都不能运行
input[name='items']:checkbox[checked=checked]    ff3.6 ie7 都不能运行
input[name='items']:checked    ff3.6 ie7 都可以运行
input[name='items']:checkbox:checked    ff3.6 ie7 都可以运行

相关阅读更多 +