相思资源网 Design By www.200059.com

一、jquery判断checkbox是否选中及改变checkbox状态

jquery判断checked的三种方法:
复制代码 代码如下:
.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦

jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
复制代码 代码如下:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);

jquery1.6+:prop的4种赋值:
复制代码 代码如下:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");

二、jquery如何判断checkbox(复选框)是否被选中

谁都知道 在html 如果一个复选框被选中 是 checked="checked"。

但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked

所以很多朋友判断  if($("#id").attr("checked")=="true") 这个是错误的,其实应该是 if($("#id").attr("checked")==true)
例子里面包括了一下几个功能。
复制代码 代码如下:
   <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="获得选中的所有值">

代码
 复制代码 代码如下:
<!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="/UploadFiles/2021-04-02/jquery.js">   <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()+""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="选中所有奇数">
   <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')
应该是if($("#checkbox1").attr("checked")==true)
全选和全不选函数
复制代码 代码如下:
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是一个非常容易上手的框架,但是有很多东西需要我们深入学习的。

判断checkbox是否被选中网上有选多种写法,这里有一种方法,个人觉得

比较方便。

因为比较简单,没什么技术含量,直接代码
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="/UploadFiles/2021-04-02/jquery-1.6.4.min.js"> <script type="text/javascript">
$(function(){
      /*------------
        全选/全不选
        ------------*/
     $('#cboxchecked').click(function(){
         //判断apple是否被选中
         var bischecked=$('#cboxchecked').is(':checked');
         var fruit=$('input[name="fruit"]');
         bischecked"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>


标签:
JQuery,checkbox,是否选中

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“JQuery判断checkbox是否选中及其它复选框操作方法合集”

暂无JQuery判断checkbox是否选中及其它复选框操作方法合集的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。