checkBox的检验和获取-白红宇

checkBox的检验和获取

阅读量：6818 次

发布时间：2019-06-26

本文共 2472 字，大约阅读时间需要 8 分钟。

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>