jQuery 对checkbox的操作

很久没有写JQuery的文章了。今天来看下JQ对天Checkbox复选框的操作。
看下面的一个小例子。在这个例子中包括了以下几个功能

1. 全选
2. 取消全选
3. 选中所有奇数
4. 反选
5. 获得选中的所有值

<!--
     $
("document").ready(function(){
       $
("#btn1").click(function(){
            $
("[name='checkbox']").attr("checked",'true');//全选
        
})
       $
("#btn2").click(function(){
          $
("[name='checkbox']").removeAttr("checked");//取消全选
      
})
       $
("#btn3").click(function(){
          $
("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
      
})
       $
("#btn4").click(function(){
          $
("[name='checkbox']").each(function(){//反选
              
if($(this).attr("checked")){
                $
(this).removeAttr("checked");
            
}
            
else{
                $
(this).attr("checked",'true');
            
}
          
})
      
})
      $
("#btn5").click(function(){//输出选中的值
      
var str="";
          $
("[name='checkbox'][checked]").each(function(){
              
str+=$(this).val()+"\r\n";
            
//alert($(this).val());
          
})
        
alert(str);
      
})
      
})
  -->

我们来查看下最后的演示:

提示:你可以先修改部分代码再运行。

OK,到此结束。有空再写点啥的!

GOTOP5 条评论 To jQuery 对checkbox的操作

  1. minux 说道:

    chrome 7.0下好像全选没反应,

  2. 辐射鱼 说道:

    再深入些整成个成品就好了,撒花儿

  3. Louis 说道:

    CssRain你是偶的偶像,向你学习。OH!YE

  4. CssRain 说道:

    $(“[name='checkbox']“)
    简化为
    $(“:checkbox”).

    • chris_in 说道:

      $(”[name='checkbox']“) 能查到某个或某些元素的 name=”checkbox”

      而$(”:checkbox”) 这表示 查找的所有元素。

      所有根本不能等同!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

无觅相关文章插件,快速提升流量