等待-放飞梦想 » checbox http://leotheme.cn 勤现在-乐将来 Tue, 07 Feb 2012 07:06:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 jQuery 对checkbox的操作 http://leotheme.cn/javascript/jquerytocheckbox.html http://leotheme.cn/javascript/jquerytocheckbox.html#comments Wed, 22 Oct 2008 03:55:42 +0000 Await http://leotheme.cn/?p=120 您可能也喜欢：
用jQuery实现个性有序列表
jQuery实现背景图渐变切换
jQuery中queue和dequeue的用法
jQuery性能优化指南
用jQuery处理文本框的焦点[focus]状态 无觅 ]]> 很久没有写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,到此结束。有空再写点啥的！

您可能也喜欢：

用jQuery实现个性有序列表
jQuery实现背景图渐变切换
jQuery中queue和dequeue的用法
jQuery性能优化指南
用jQuery处理文本框的焦点[focus]状态
无觅

相关文章

  • 2011-09-08 -- jQuery中queue和dequeue的用法 (1)
    今天在做右下角那个静止的工具栏时遇到了一个问题。鼠标放上去的时候，要让周围的4个按钮按顺序显示出来，移开的时候要按顺序隐藏。左思右想发现用animate的回调函数方式来写比较麻烦。于是百度了下，发现j...
  • 2011-08-17 -- Flight主题更新 (16)
    这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。...
  • 2010-11-24 -- JQ弹出层插件(tipsWindow 2.8) (154)
    已更新为2.7...
  • 2010-10-12 -- 分享Flight主题中的焦点图（基于JQ） (22)
    关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动...
  • 2010-10-12 -- jquery ajax方法如load,get等 在Chrome下失效的问题 (4)
    最近碰到一个问题，发现jquery在chrome 中， ajax的load get等方法完全失效。 代码如下： function getHtml(url,ctner){ //alert(c...
]]> http://leotheme.cn/javascript/jquerytocheckbox.html/feed 5