欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery判斷checkbox是否選中及其它復(fù)選框操作方法合集

 更新時間：2015年06月01日 08:42:53   投稿：junjie  
這篇文章主要介紹了JQuery判斷checkbox是否選中及其它復(fù)選框操作方法合集,本文匯總了網(wǎng)上解決這個問題比較好的幾篇文章,需要的朋友可以參考下

一、jquery判斷checkbox是否選中及改變checkbox狀態(tài)

jquery判斷checked的三種方法:

復(fù)制代碼 代碼如下:

.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'):    //所有版本:true/false//別忘記冒號哦

jquery賦值checked的幾種寫法:
所有的jquery版本都可以這樣賦值:
復(fù)制代碼 代碼如下:

// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);

jquery1.6+:prop的4種賦值:
復(fù)制代碼 代碼如下:

// $("#cb1″).prop("checked",true);//很簡單就不說了哦
// $("#cb1″).prop({checked:true}); //map鍵值對
// $("#cb1″).prop("checked",function(){
return true;//函數(shù)返回true或false
});
//記得還有這種哦:$("#cb1″).prop("checked","checked");

二、jquery如何判斷checkbox（復(fù)選框）是否被選中

誰都知道 在html 如果一個復(fù)選框被選中 是 checked="checked"。

但是我們?nèi)绻胘query alert($("#id").attr("checked")) 會提示您是true而不是checked

所以很多朋友判斷  if($("#id").attr("checked")=="true") 這個是錯誤的，其實應(yīng)該是 if($("#id").attr("checked")==true)
例子里面包括了一下幾個功能。

復(fù)制代碼 代碼如下:

   <input type="button" id="btn1" value="全選">
   <input type="button" id="btn2" value="取消全選">
   <input type="button" id="btn3" value="選中所有奇數(shù)">
   <input type="button" id="btn4" value="反選">
   <input type="button" id="btn5" value="獲得選中的所有值">

代碼
 
復(fù)制代碼 代碼如下:

<!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=">
  <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');//選中所有奇數(shù)
 
    })
    $("#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);
    })
   })
  //-->
  </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="選中所有奇數(shù)">
   <input type="button" id="btn4" value="反選">
   <input type="button" id="btn5" value="獲得選中的所有值">
   <br>
   <input type="checkbox" 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>
 


三、 jquery判斷checkbox是否被選中

在html的checkbox里，選中的話會有屬性checked="checked"。

如果用一個checkbox被選中，alert這個checkbox的屬性"checked"的值alert($"#xxx".attr("checked"))，會打印出"true""，而不是checked"！
如果沒被選中，打印出的是"undefined"。

不要嘗試去做這樣的判斷：if($"#xxx".attr("checked")=="true")或者if($"#xxx".attr("checked")=='checked')
應(yīng)該是if($("#checkbox1").attr("checked")==true)
全選和全不選函數(shù)

復(fù)制代碼 代碼如下:

function checkAll(){
   if($("#checkbox1").attr("checked")==true){
    $("input[name='xh']").each(function() {
     $(this).attr('checked',true);
    });
   }else {
    $("input[name='xh']").each(function() {
     $(this).attr('checked',false);
    });
   }
  }

四、JQuery 判斷checkbox是否選中，checkbox全選，獲取checkbox選中值
JQuery是一個非常容易上手的框架，但是有很多東西需要我們深入學(xué)習(xí)的。

判斷checkbox是否被選中網(wǎng)上有選多種寫法，這里有一種方法，個人覺得

比較方便。

因為比較簡單，沒什么技術(shù)含量，直接代碼

復(fù)制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery 判斷checkbox是否選中，checkbox全選，獲取checkbox選中值</title>
<script type="text/javascript" language="javascript" src=" <script type="text/javascript">
$(function(){
      /*------------
        全選/全不選
        ------------*/
     $('#cboxchecked').click(function(){
         //判斷apple是否被選中
         var bischecked=$('#cboxchecked').is(':checked');
         var fruit=$('input[name="fruit"]');
         bischecked?fruit.attr('checked',true):fruit.attr('checked',false);
         });
         /*-------------
            獲取選中值
          -------------*/
        $('#btn_submit').submit(function(){
            $('input[name="fruit"]:checked').each(function(){
                var sfruit=$(this).val();
                alert(sfruit);
                });
                return false;
            });
    })
</script>
</head>
 
<body>
<form action="">
  <input type="checkbox"  id="cboxchecked" />
  <label for="cboxchecked">全選/全不選</label>
  <br />
  <br />
  <input type="checkbox"  id="cboxapple" name="fruit" value="apple" />
  <label for="apple">Apple</label>
  <input type="checkbox"  id="cboxorange" name="fruit" value="orange" />
  <label for="orange">Orange</label>
  <input type="checkbox"  id="cboxbanana" name="fruit" value="banana" />
  <label for="banana">Banana</label>
  <input type="checkbox"  id="cboxgrapes" name="fruit" value="grapes" />
  <label for="grapes">Grapes</label>
  <br />
  <br />
  <input type="submit" id="btn_submit" value="submit" />
</form>
</body>
</html>


相關(guān)文章

最新評論