Form表单之radio单选框操作

最新推荐文章于 2024-01-30 23:16:14 发布

陈_三

最新推荐文章于 2024-01-30 23:16:14 发布

阅读量8.3w

点赞数 16

分类专栏： javaScript

本文链接：https://blog.csdn.net/qinshijangshan/article/details/54344188

版权

javaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

input单选框，name相同的单选项为同一单选组：

1.radio选中某值的项：

<label>input单选1组：</label>
radio单选项1<input type="radio" name="radio1" value="radio单选项1"/>
radio单选项2<input type="radio" name="radio1" value="radio单选项2"/>

$("input:radio[name='radio1'][value=radio单选项2]").attr("checked","checked");和

$("input[name='radio1'][value=radio单选项2]").attr("checked","checked");的效果相同。

如果不能实现效果，请尝试给value添加单引号和双引号试试。

<label>input单选2组：</label>
radio单选项1<input class="radio2" type="radio" name="radio2" value="radio单选项1"/>
radio单选项2<input class="radio2" type="radio" name="radio2" value="radio单选项2"/>
radio单选项3<input class="radio2" type="radio" name="radio2" value="radio单选项3"/>

$(".radio2[value=radio单选项3]").attr("checked","checked");会选中多个clas=“radio2”的单选组中值为radio单选项3的项。

<label>input单选3组：</label>
radio单选项1<input id="radio3" type="radio" name="radio3" value="radio单选项1"/>
radio单选项2<input id="radio3" type="radio" name="radio3" value="radio单选项2"/>
radio单选项3<input id="radio3" type="radio" name="radio3" value="radio单选项3"/>

$("#radio3[value=radio单选项2]").attr("checked","checked");

选中id="radio3"的两组（input单选3组和input单选4组）单选值为“radio单选项2”的项，同一页面相同的id不是只能有一个的吗？超出了我的认知呀。

2.radio选中某索引的项：

<label>input单选5组：</label>
radio单选项1<input type="radio" name="radio5" value="radio单选项1"/>
radio单选项2<input type="radio" name="radio5" value="radio单选项2"/>
radio单选项3<input type="radio" name="radio5" value="radio单选项3"/>
radio单选项4<input type="radio" name="radio5" value="radio单选项4"/>

$("input[name='radio5']").eq(索引值).attr("checked","checked");

索引值从0开始；$("input[name='radio5']").eq(2).attr("checked","checked");选中name="radio5"的第三项；

<label>input单选6组：</label>
radio单选项1<input type="radio" name="radio6" value="radio单选项1"/>
radio单选项2<input type="radio" name="radio6" value="radio单选项2"/>
radio单选项3<input type="radio" name="radio6" value="radio单选项3"/>
radio单选项4<input type="radio" name="radio6" value="radio单选项4"/>

$("input[name='radio6']:first").attr("checked","checked");//:first选中第一项；

<label>input单选7组：</label>
radio单选项1<input type="radio" name="radio7" value="radio单选项1"/>
radio单选项2<input type="radio" name="radio7" value="radio单选项2"/>
radio单选项3<input type="radio" name="radio7" value="radio单选项3"/>
radio单选项4<input type="radio" name="radio7" value="radio单选项4"/>

$("input[name='radio7']:last").attr("checked","checked");//选中最后一项

3.获取radio选中项的值：

<label>input单选8组：</label>
radio单选项1<input type="radio" name="radio8" value="radio单选项1"/>
radio单选项2<input type="radio" name="radio8" value="radio单选项2"/>
radio单选项3<input type="radio" name="radio8" value="radio单选项3"/>
radio单选项4<input type="radio" name="radio8" value="radio单选项4"/>

$("input[name='radio8']:checked").val();//获取选中项的值

4.获取radio选中项的index(index从1开始)：

<label>input单选9组：</label>
radio单选项1<input type="radio" name="radio9" value="radio单选项1"/>
radio单选项2<input type="radio" name="radio9" value="radio单选项2"/>
radio单选项3<input type="radio" name="radio9" value="radio单选项3"/>
radio单选项4<input type="radio" name="radio9" value="radio单选项4"/>

$("input[name='radio9']:checked").index();//获取选中项的索引（这里用索引似乎也不大恰当，值是从1开始，不是0）

5.获取radio某值的index：

<label>input单选10组：</label>
radio单选项1<input type="radio" name="radio10" value="radio单选项1"/>
radio单选项2<input type="radio" name="radio10" value="radio单选项2"/>
radio单选项3<input type="radio" name="radio10" value="radio单选项3"/>
radio单选项4<input type="radio" name="radio10" value="radio单选项4" checked="checked"/>

$("input[name='radio10'][value=radio单选项2]").index()//获取radio组中某值的项（第二项的index()=2，不是1，index()从1开始）

6.获取radio某索引对应的值：

<label>input单选11组：</label>
radio单选项1<input type="radio" name="radio11" value="radio单选项1" checked="checked"/>
radio单选项2<input type="radio" name="radio11" value="radio单选项2"/>
radio单选项3<input type="radio" name="radio11" value="radio单选项3"/>
radio单选项4<input type="radio" name="radio11" value="radio单选项4"/>

$("input[name='radio11']").eq(3).val();//获取radio某索引的值

7.删除radio值对应的项：

<label>input单选12组：</label>
radio单选项1<input type="radio" name="radio12" value="radio单选项1" checked="checked"/>
radio单选项2<input type="radio" name="radio12" value="radio单选项2"/>
radio单选项3<input type="radio" name="radio12" value="radio单选项3"/>
radio单选项4<input type="radio" name="radio12" value="radio单选项4"/>

$("input[name='radio12'][value=radio单选项2]").remove();//删除值对应的项，后面项的index序号依次减1

删除索引对应的项：$("input[name='radio12']").eq(1).remove();//在此不单独加示例。

至于是新增项没见到有类似操作；

8.禁用radio单选组或某项：

<label>input单选13组：</label>
radio单选项1<input type="radio" name="radio13" value="radio单选项1" checked="checked"/>
radio单选项2<input type="radio" name="radio13" value="radio单选项2"/>
radio单选项3<input type="radio" name="radio13" value="radio单选项3"/>
radio单选项4<input type="radio" name="radio13" value="radio单选项4"/>

//$("input[name='radio13']").eq(2).prop("disabled","disabled");//禁用某项，当然选择器也可以换成某值对应的项；
$("input[name='radio13']").prop("disabled","disabled");//禁用整组radio
$("input[name='radio13']").eq(2).attr("checked","checked");//禁用后不可切换选中项，但js可操作
//$("input[name='radio13']").removeProp("disabled");//移除radio禁用

<label>input单选15组：</label>
radio单选项1<input type="radio" name="radio15" value="radio单选项1" checked="checked"/>
radio单选项2<input type="radio" name="radio15" value="radio单选项2"/>
radio单选项3<input type="radio" name="radio15" value="radio单选项3"/>
radio单选项4<input type="radio" name="radio15" value="radio单选项4"/>

//$("input[name='radio15']").eq(0).prop("checked",true);
//$("input[name='radio15']").eq(0).prop("checked",false);//测试checked可用false,true;
$("input[name='radio15']").eq(0).prop("disabled",true);
$("input[name='radio15']").eq(0).prop("disabled",false);//测试disabled可用false,true;

js操作radio的checked和disabled属性值可用true和false值来代替添加、移除checked属性；但请别给true和false加上引号，引号内为任意值都是给radio添加checked属性；

参考文档：http://blog.csdn.net/htofly/article/details/7721858

2、让页面中所有的radio可用。
$("input:radio").attr("disabled",false);
3、让页面中所有的radio不可用。
$("input:radio").attr("disabled","disabled");
5、让页面中“未选中”状态的radio不可用。
$("input:radio:not([checked])").attr("disabled","disabled");
6、遍历选中状态的radio，除了某一个radio之外，其他的“选中”状态的radio设定是“未选中”状态。
$('input:radio:checked').each(function(i,val){
if(val.name != "dialCheckResult" ){
$("input:radio[name='"+val.name+"']:checked").attr('checked',false);
}
});
7、让所有“未选中”状态的radio不可用。
$("input:radio:not([checked])").attr("disabled","disabled");
9、让所有“选中”状态的radio置于“未选中”状态。
$('input:radio:checked').attr('checked',false);
10、让页面中的radio都置于“选中”状态或“未选中”状态。
$("input:radio").attr("checked",true);
$("input:radio").attr("checked",false);

参考文档：http://www.jb51.net/article/56465.htm

html内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <title>Form表单单选操作示例1</title>
  <style>
    body{font-size:14px;}
    label{display:inline-block;width:8em;margin-left:0.3em;margin-right:0.3em;}
	input{margin-top:0.3em;margin-bottom:0.3em;}
	.tipmsg{font-size:14px;color:#f00;}
  </style>
</head>

<body>
<form>
  <h2>input单选(radio)：相同name的单选项为同一组单选</h3>
  <h3>radio选中某值的项</h3><hr>
  <div>
    <label>input单选1组：</label>
    radio单选项1<input type="radio" name="radio1" value="radio单选项1"/>
	radio单选项2<input type="radio" name="radio1" value="radio单选项2"/>
	<span class="tipmsg">input[name='radio1'][value=radio单选项2]").attr("checked","checked");选中值为"radio单选项2"的项</span>
  </div>
  
  <div>
    <label>input单选2组：</label>
    radio单选项1<input class="radio2" type="radio" name="radio2" value="radio单选项1"/>
	radio单选项2<input class="radio2" type="radio" name="radio2" value="radio单选项2"/>
	radio单选项3<input class="radio2" type="radio" name="radio2" value="radio单选项3"/>
	<span class="tipmsg">$(.radio2[value=val]).attr("checked","checked");选中某值的项</span>
  </div>
  
  <div>
    <label>input单选3组：</label>
    radio单选项1<input id="radio3" type="radio" name="radio3" value="radio单选项1"/>
	radio单选项2<input id="radio3" type="radio" name="radio3" value="radio单选项2"/>
	radio单选项3<input id="radio3" type="radio" name="radio3" value="radio单选项3"/>
	<span class="tipmsg">$(.radio2[value=val]).attr("checked","checked");选中某值的项</span>
  </div>
  
  <div>
    <label>input单选4组：</label>
    radio单选项1<input id="radio3" type="radio" name="radio4" value="radio单选项1"/>
	radio单选项2<input id="radio3" type="radio" name="radio4" value="radio单选项2"/>
	radio单选项3<input id="radio3" type="radio" name="radio4" value="radio单选项3"/>
	<span class="tipmsg">input单选3组已用过id="radio3"，该组无法选中单选项</span>
  </div>
  
  <h3>radio选中某索引的项</h3><hr>
  <div>
    <label>input单选5组：</label>
    radio单选项1<input type="radio" name="radio5" value="radio单选项1"/>
	radio单选项2<input type="radio" name="radio5" value="radio单选项2"/>
	radio单选项3<input type="radio" name="radio5" value="radio单选项3"/>
	radio单选项4<input type="radio" name="radio5" value="radio单选项4"/>
	<span class="tipmsg">$("input[name='radio5']").eq(2).attr("checked","checked");//选中第三项，索引从0开始</span>
  </div>
  
  <div>
    <label>input单选6组：</label>
    radio单选项1<input type="radio" name="radio6" value="radio单选项1"/>
	radio单选项2<input type="radio" name="radio6" value="radio单选项2"/>
	radio单选项3<input type="radio" name="radio6" value="radio单选项3"/>
	radio单选项4<input type="radio" name="radio6" value="radio单选项4"/>
	<span class="tipmsg">$("input[name='radio6']:first").attr("checked","checked");//选中第一项</span>
  </div>
  
  <div>
    <label>input单选7组：</label>
    radio单选项1<input type="radio" name="radio7" value="radio单选项1"/>
	radio单选项2<input type="radio" name="radio7" value="radio单选项2"/>
	radio单选项3<input type="radio" name="radio7" value="radio单选项3"/>
	radio单选项4<input type="radio" name="radio7" value="radio单选项4"/>
	<span class="tipmsg">$("input[name='radio7']:last").attr("checked","checked");//选中最后一项</span>
  </div>
  
  <h3>获取radio选中值</h3><hr>
  <div>
    <label>input单选8组：</label>
    radio单选项1<input type="radio" name="radio8" value="radio单选项1"/>
	radio单选项2<input type="radio" name="radio8" value="radio单选项2"/>
	radio单选项3<input type="radio" name="radio8" value="radio单选项3"/>
	radio单选项4<input type="radio" name="radio8" value="radio单选项4"/>
	<span class="tipmsg">$("input[name='radio8']:checked").val();//获取选中项的值</span>
  </div>
  
  <h3>获取radio选中项的index(index从1开始)</h3><hr>
  <div>
    <label>input单选9组：</label>
    radio单选项1<input type="radio" name="radio9" value="radio单选项1"/>
	radio单选项2<input type="radio" name="radio9" value="radio单选项2"/>
	radio单选项3<input type="radio" name="radio9" value="radio单选项3"/>
	radio单选项4<input type="radio" name="radio9" value="radio单选项4"/>
	<span class="tipmsg">$("input[name='radio9']:checked").index();//获取选中项的索引（这里用索引似乎也不大恰当，值是从1开始，不是0）</span>
  </div>
  
  <h3>获取radio某值的index</h3><hr>
  <div>
    <label>input单选10组：</label>
    radio单选项1<input type="radio" name="radio10" value="radio单选项1"/>
	radio单选项2<input type="radio" name="radio10" value="radio单选项2"/>
	radio单选项3<input type="radio" name="radio10" value="radio单选项3"/>
	radio单选项4<input type="radio" name="radio10" value="radio单选项4" checked="checked"/>
	<span class="tipmsg">$("input[name='radio10'][value=radio单选项2]").index();//获取radio某值的index()</span>
  </div>
  
  <h3>获取radio某索引对应的值</h3><hr>
  <div>
    <label>input单选11组：</label>
    radio单选项1<input type="radio" name="radio11" value="radio单选项1" checked="checked"/>
	radio单选项2<input type="radio" name="radio11" value="radio单选项2"/>
	radio单选项3<input type="radio" name="radio11" value="radio单选项3"/>
	radio单选项4<input type="radio" name="radio11" value="radio单选项4"/>
	<span class="tipmsg">$("input[name='radio11']").eq(3).val();//获取radio某索引的值</span>
  </div>
    
  <h3>删除radio某值的项</h3><hr>
  <div>
    <label>input单选12组：</label>
    radio单选项1<input type="radio" name="radio12" value="radio单选项1" checked="checked"/>
	radio单选项2<input type="radio" name="radio12" value="radio单选项2"/>
	radio单选项3<input type="radio" name="radio12" value="radio单选项3"/>
	radio单选项4<input type="radio" name="radio12" value="radio单选项4"/>
	<span class="tipmsg">$("input[name='radio12'][value=radio单选项2]").remove();//删除值对应的项，后面项的index序号依次减1</span>
  </div>
  
  <h3>禁用radio</h3><hr>
  <div>
    <label>input单选13组：</label>
    radio单选项1<input type="radio" name="radio13" value="radio单选项1" checked="checked"/>
	radio单选项2<input type="radio" name="radio13" value="radio单选项2"/>
	radio单选项3<input type="radio" name="radio13" value="radio单选项3"/>
	radio单选项4<input type="radio" name="radio13" value="radio单选项4"/>
	<span class="tipmsg"></span>
  </div>
  
  <div>
    <label>input单选14组：</label>
    radio单选项1<input type="radio" name="radio14" value="radio单选项1" checked="checked"/>
	radio单选项2<input type="radio" name="radio14" value="radio单选项2"/>
	radio单选项3<input type="radio" name="radio14" value="radio单选项3"/>
	radio单选项4<input type="radio" name="radio14" value="radio单选项4"/>
	<span class="tipmsg"></span>
  </div>
  
  <div>
    <label>input单选14组：</label>
    radio单选项1<input type="radio" name="radio14" value="radio单选项1" checked="checked"/>
	radio单选项2<input type="radio" name="radio14" value="radio单选项2"/>
	radio单选项3<input type="radio" name="radio14" value="radio单选项3"/>
	radio单选项4<input type="radio" name="radio14" value="radio单选项4"/>
	<span class="tipmsg">禁用的radio可用js操作</span>
  </div>
  
  <div>
    <label>input单选15组：</label>
    radio单选项1<input type="radio" name="radio15" value="radio单选项1" checked="checked"/>
	radio单选项2<input type="radio" name="radio15" value="radio单选项2"/>
	radio单选项3<input type="radio" name="radio15" value="radio单选项3"/>
	radio单选项4<input type="radio" name="radio15" value="radio单选项4"/>
	<span class="tipmsg">js操作radio的checked和disabled属性值可用true和false值来代替添加、移除checked属性；但请别给true和false加上引号，引号内为任意值都是给radio添加checked属性；</span>
  </div>
  
  <div class="tipmsg">
  radio没有readonly属性
  </div>

</form>

<script src="./jquery-1.x.min.js"></script>
<script>
$(function(){
  //$("input:radio[name='radio1'][value=radio单选项2]").attr("checked","checked");
  $("input[name='radio1'][value=radio单选项2]").attr("checked","checked");
  $(".radio2[value=radio单选项3]").attr("checked","checked");
  $("#radio3[value=radio单选项2]").attr("checked","checked");//id必须在同一页面必须是唯一的，但同一单选组
  $("input[name='radio5']").eq(2).attr("checked","checked");
  $("input[name='radio6']:first").attr("checked","checked");
  $("input[name='radio7']:last").attr("checked","checked");
  $("input[name='radio8']").change(function(){
	var val = $("input[name='radio8']:checked").val();
	alert(val);
  });
  
  $("input[name='radio9']").change(function(){
	var val = $("input[name='radio9']:checked").index();
	alert(val);
  });
  
  var index1 = $("input[name='radio10'][value=radio单选项2]").index();
  //alert("radio10单选组值为‘radio单选项2’的项为："+index1);//
  
  var val1 = $("input[name='radio11']").eq(3).val();
  //alert("radio11单选组索引3的值为："+val1);//
  
  //$("input[name='radio12'][value=radio单选项2]").remove();
  var index2 = $("input[name='radio12'][value=radio单选项4]").index();
  //alert(index2);//
  
  //$("input[name='radio13']").eq(2).prop("disabled","disabled");//禁用某项，当然选择器也可以换成某值对应的项；
  $("input[name='radio13']").prop("disabled","disabled");//禁用整组radio
  $("input[name='radio13']").eq(2).attr("checked","checked");//禁用后不可切换选中项，但js可操作
  //$("input[name='radio13']").removeProp("disabled");//移除radio禁用
  
  $("input[name='radio14']").prop("disabled","disabled");
  $("input[name='radio14']").eq(3).attr("checked","checked");
  
  //$("input[name='radio15']").eq(0).prop("checked",true);
  //$("input[name='radio15']").eq(0).prop("checked",false);//测试checked可用false,true;
  $("input[name='radio15']").eq(0).prop("disabled",true);
  $("input[name='radio15']").eq(0).prop("disabled",false);//测试disabled可用false,true;
});
</script>
</body>
</html>

陈_三

关注

16
点赞
踩
45

收藏

觉得还不错? 一键收藏
0
评论
Form表单之radio单选框操作

input单选框，name相同的单选项为同一单选组：1.选中某值的项：input单选1组：radio单选项1radio单选项2$("input:radio[name='radio1'][value=radio单选项2]").attr("checked","checked");和$("input[name='radio1'][value=radio单选项2]").attr("ch
复制链接

扫一扫