jQuery如何判断和设定单选多选是否选中??

  如何判断HTML中的单选多选是否选中呢?

 这是web编程中最常用的判断,可是前段时间,却遇到了一个很奇怪的问题。

我想很多人会这样判断

 if($("#weixuanzhong").attr("checked")=="checked")//选中时
		 {

		 }

但如果是如下的HTML代码:

<input type="checkbox" checked="checked" value="male" id="xuanzhong"  />

却发现上边的判断始终都是真,不管多选框是不是选中。于是我奇怪,以前自己都是这么判断的啊,好像没发现问题啊。

于是发现了这个属性其实在不同情况下是不同的。

1 HTML中没有checked="checked"这个属性时

例如:

HTML代码

<input type="checkbox"  value="male" id="xuanzhong"  />

判断是否选中可以这么做:

  if($("#xuanzhong").prop("checked"))//选中时,为真
		 {
		    alert($("#xuanzhong").prop("checked"));
		 }

2HTML中有checked="checked"这个属性时,不可以通过 if($("#weixuanzhong").attr("checked")=="checked")来判断是否选中,

HTML代码

<input type="checkbox"  checked="checked" value="male" id="xuanzhong"  />

判断是否选中可以这么做:

	 if($("#xuanzhong").attr("checked")=="checked")//不管是否选中,都是真,无法判断
		 {
		     alert($("#xuanzhong").attr("checked"));
		 }

		  if($("#xuanzhong").prop("checked"))//选中时,为真
		 {
		    alert($("#xuanzhong").prop("checked"));
		 }

3如何选中多选?

一般情况下我们都使用 checked="checked"来设定选中项,好像也没问题,但如果是如下的HTML代码,

多选默认选中
<input type="checkbox"  checked="checked" value="male" id="xuanzhong"  />

使用如下的代码,并不能保证多选是选中状态,即使设定了,也会出现多选框没有选中的情况

 $("#xuanzhong").attr("checked", "checked");

相反如果没有checked="checked"这个属性,也就是说HTML代码如下:

<input type="checkbox"   value="male" id="xuanzhong"  />

可以使用如下脚本设定选中状态

 $("#xuanzhong").attr("checked", "checked");

以此看来,设定多选框的选中状态,如果使用 $("#xuanzhong").attr("checked", "checked");这种方式,必须保证原始的HTML中没有checked="checked",否则就会出错,达不到想要的效果。

但使用$("#xuanzhong").prop("checked",true)不管什么情况都是可以选中的。

经过测试才发现,之所以自己之前能通过$("#xuanzhong").attr("checked")=="checked"判断多选框是否选中,恰恰是应为HTML中没有checked="checked",每次都是自己通过$("#xuanzhong").attr("checked", "checked");这种方式设定选中状态的,因此没有出错。

因此判断多选框是否选中应该使用$("#xuanzhong").prop("checked"),而不是$("#xuanzhong").attr("checked")=="checked",设定选中应该使用$("#xuanzhong").prop("checked",true),而不是$("#xuanzhong").attr("checked", "checked");,否则稍微不注意就会出错。

经过测试发现单选和多选是一样的,也和HTML中有没有checked="checked"这个有关

时间: 2024-10-06 01:37:10

jQuery如何判断和设定单选多选是否选中??的相关文章

JQuery判断radio(单选框)是否选中和获取选中值方法总结

篇文章主要介绍了JQuery判断radio(单选框)是否选中和获取选中值方法总结,本文讲解了利用获取选中值判断选中.使用checked属性判断选中.jquery获取radio单选按钮的值.获取一组radio被选中项的值.设置单选按钮被选中等内容,需要的朋友可以参考下 一.利用获取选中值判断选中 直接上代码,别忘记引用JQuery包 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

jQuery操作下拉列表以及单选多选框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> </head>

jquery小练习 单选多选 二级联动 员工信息的添加与删除

单选多选与全选 就是点击按钮从左边把内容一道右边 <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <script type="text/javascript" src="js/jquery-3.4.1.min.js&qu

android 实现调查问卷-单选-多选

很久没写东西了,今天来总结下有关android调查问卷的需求实现. 转载请加地址:http://blog.csdn.net/jing110fei/article/details/46618229 先上效果图 个人分析,最好是用动态布局加载来实现,好了,说思路,将这整体分为3块 最外面这个布局里面,根据第二层问题的数量来动态生成布局,加入在第一层布局里面, 然后再根据问题下答案的数量来动态生成布局,加入第二层布局里面,思路这么透彻,想想还有些小激动呢. 先建造三个实体类 public class

jQuery如何判断某一个元素是否存在

jQuery如何判断某一个元素是否存在:判断一个元素是否存在的方法有多重,下面介绍一种比较简单的,看下面的代码: $(".mytest").length 通过判断length属性值就可以知道是否存在,如果大于0就是存在,否则就是不存在. 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9654 更多内容可以参阅:http://www.softwhy.com/jquery/

jQuery实现Checkbox中项目开发全选全不选的使用

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Checkbox的练习</title> 5 <style type="text/css"> 6 *{margin:0px;padding:0px;} 7 table{width:100%;text-align:center;} 8 </style> 9 10 <script

关于复选框选中状态的判断

1.checked的选中状态 不设置checked是默认不选被选中的, 一旦设置checked="false"或者checked = false或者checked="true"或者checked = true或者不设置任何值,都会被解释为选中. <input type="checkbox" name="test" id="test1"/> //未被选中 <input type="

jquery中判断是否按下回车enter键

<script>   function sendsubmit()   {   $("#userLoginForm").submit();   return false;   }   $(document).keypress(function(event){   var keycode = (event.keyCode ? event.keyCode : event.which);   if(keycode == '13'){   $("#userLoginForm

[SAP ABAP开发技术总结]选择屏幕——按钮、单选复选框

目录导航 声明:原创作品,转载时请注明文章来自SAP师太博客,并以超链接形式标明文章原始出处,否则将追究法律责任!原文出自: 12.6.         按钮.单选复选框.下拉框的FunCode. 91 12.6.1.     选择屏幕中的按钮... 92 12.6.2.     选择屏幕中的单选/复选按钮:点击时显示.隐藏其他屏幕元素... 92 12.6.     按钮.单选复选框.下拉框的FunCode 如果复选框与单选按钮没有设置Function Code,则它们就会像普通的输入框一样,