radio单选框再点击取消选中

最新推荐文章于 2024-06-18 14:33:23 发布

chuqiao1872

最新推荐文章于 2024-06-18 14:33:23 发布

阅读量1.3k

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/mshworld/blog/330124

版权

html:

<!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=gb2312" />
<title>单选框</title>
<script type="text/javascript" src="sripts/jquery.js?v=1.3.2"></script>
<script type="text/javascript" src="sripts/checkradio.js"></script>
</head>
<body>
<input type="radio"  name="g" id="a" value="00" flag="0" onclick="onClickRadioStyle(this)"/>选项a
<input type="radio"  name="g" id="b" value="01" flag="0" onclick="onClickRadioStyle(this)"/>选项b
<input type="radio"  name="g" id="c" value="02" flag="0" onclick="onClickRadioStyle(this)"/>选项c
<input type="radio"  name="g" id="d" value="03" flag="0" onclick="onClickRadioStyle(this)"/>选项d     
</body>
</html>

checkradio.js:

//参数：obj为当前点击的radio对象
function onClickRadioStyle(obj){
  var group = $(obj).attr('name');//获取当前点击对象的name，作为组的名称
   if($(obj).attr('flag')==1){//flag为1表示当前选中
    $(obj).attr('flag',0);
      $(obj).removeAttr("checked"); 
     }else if($(obj).attr('flag')==0){   //flag为0表示当前未选中 
      $(obj).attr('flag',1);
      $(obj).attr("checked","checked");  
     }
     
     //将其它未选中的flag置为0
     $("input[name='"+group+"']").not("input[name='"+group+"']:checked").each(function(){
      $(this).attr('flag',0);
     
     });     
}

转载于:https://my.oschina.net/mshworld/blog/330124