码迷,mamicode.com
首页 > 其他好文 > 详细

checkBox的检验和获取

时间:2015-03-18 17:52:52      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:

 1.检验指定的checkedbox是否被选中,jquery1.6之前和之后的版本之间有区别

jquery1.6之前
1.attr("checked") 的值为:true(选中); false(未选中);
2.没有prop方法;

 

jquery1.6之后
1.attr方法值改变,其值为:checked(选中);undefined(未选中);
2.有prop方法;pro("checked")的值为:true(选中);false(未选中);
3.另外还有一个is方法;is( ":checked" ),值为:true(选中);false(未选中);(跟prop的方法区别是,参数里面有冒号)
如果不用jquery,只用javascriptd,
var test = document.getElementById( "dfc").checked;
test的值:true(选中),false(未选中);

2.关于checked一些操作的demo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
     <HEAD>
          <TITLE>New Document</TITLE>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <SCRIPT LANGUAGE="JavaScript" src="jquery.js"></script>
<SCRIPT LANGUAGE="JavaScript">
     $("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() + "\n";
               });
               alert(str);
          })

          $("#one").click(function(){
               var aa = $("#one").attr("checked");
               var bb = $("#one").is(":checked");
               var cc = $("#one").prop("checked");
               console.log("aa = " + aa);
               console.log("bb = " + bb);
               console.log("cc = " + cc);
          })
     })
</SCRIPT>
</HEAD>
     <BODY>
          <form name="form1" method="post" action="">
               <input type="button" id="btn1" value="全选">
               <input type="button" id="btn2" value="取消全选">
               <input type="button" id="btn3" value="选中所有奇数">
               <input type="button" id="btn4" value="反选">
               <input type="button" id="btn5" value="获得选中的所有值">
               <br>
               <input type="checkbox" id="one" name="checkbox" value="checkbox1">
               checkbox1
               <input type="checkbox" name="checkbox" value="checkbox2">
               checkbox2
               <input type="checkbox" name="checkbox" value="checkbox3">
               checkbox3
               <input type="checkbox" name="checkbox" value="checkbox4">
               checkbox4
               <input type="checkbox" name="checkbox" value="checkbox5">
               checkbox5
               <input type="checkbox" name="checkbox" value="checkbox6">
               checkbox6
               <input type="checkbox" name="checkbox" value="checkbox7">
               checkbox7
               <input type="checkbox" name="checkbox" value="checkbox8">
               checkbox8
          </form>
     </BODY>
</HTML>

checkBox的检验和获取

标签:

原文地址:http://www.cnblogs.com/xcxEpik/p/4347696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!