利用JavaScript控制单选框

最新推荐文章于 2023-02-01 13:49:09 发布
最新推荐文章于 2023-02-01 13:49:09 发布
阅读量228 收藏
点赞数
分类专栏： Java基础技术 文章标签： JavaScript F# J# ViewUI 
<script>
function f(index){
	var x=document.getElementsByName("radiobutton");
	for(var i=0;i<x.length;i++){
		if(x[i].value==index)	{
			x[i].checked=true;
			break;
		}
	}
}
</script>

<body>
	<FORM METHOD=POST ACTION="">			
		<input type="radio" name="radiobutton" value="1" />
		1
		<input type="radio" name="radiobutton" value="2" />
		2
		<input type="radio" name="radiobutton" value="3" />
		3
		<input type="radio" name="radiobutton" value="4" />
		4
		<input type="radio" name="radiobutton" value="5" />
		5
		<br>
		<input type="button" name="s1" value="OK1" οnclick="f(1);" />
		<input type="button" name="s2" value="OK2" οnclick="f(2);" />
		<input type="button" name="s3" value="OK3" οnclick="f(3);" />
		<input type="button" name="s4" value="OK4" οnclick="f(4);" />
		<input type="button" name="s5" value="OK5" οnclick="f(5);" />
	</FORM>
</body>
 

 

参考：如何控制单选、复选、列表框

一些频繁使用的javascript页面控制，做个总结。
下面是部分代码。

 

<html>
	<head>
		<script language="javascript">
 function a(){
  window.document.getElementsByName("dx")[0].checked=true;
 }
 function b(){
  window.document.getElementsByName("dx")[0].checked=false;
 }
 function c(){
  window.document.getElementsByName("fx")[0].checked=true;
 }
 function d(){
  window.document.getElementsByName("fx")[0].checked=false;
 }
 function e(){
  for(i=0;i<window.document.getElementsByName("fx").length;i++){
      if(!window.document.getElementsByName("fx")[i].checked){
       window.document.getElementsByName("fx")[i].checked=true;
      }
     }
 }
 function f(){
  for(i=0;i<window.document.getElementsByName("fx").length;i++){
      if(window.document.getElementsByName("fx")[i].checked){
       window.document.getElementsByName("fx")[i].checked=false;
      }
     }
 }
 function g(){
  window.document.getElementById("lbka")[1].selected=true;
 }
 function h(){
  alert(" 选择号为:"+window.document.getElementById("lbka").selectedIndex 
  + "    值为:" +
  window.document.getElementById("lbka")[window.document.getElementById("lbka").selectedIndex].value
  +"    文本值为:" + 
  window.document.getElementById("lbka")[window.document.getElementById("lbka").selectedIndex].text);
 }
 function m(){
  sel = false;
  var val="";
     for(i=0;i<window.document.getElementsByName("dx").length;i++){
      if(window.document.getElementsByName("dx")[i].checked){
       val = window.document.getElementsByName("dx")[i].value;
       sel=true;
    break;
      }  
     }
    if(sel){
   alert("单选值为:"+val);
     
     }else{
   alert("请选择文件");
      return false;
  }  
 }
 function j(){
  var sel = false;
  var val="";
     for(i=0;i<window.document.getElementsByName("fx").length;i++){
      if(window.document.getElementsByName("fx")[i].checked){
       if(val==""){
        val=window.document.getElementsByName("fx")[i].value;
       }else{
        val = val + "," +window.document.getElementsByName("fx")[i].value;
       } 
      }
     }
     if(val==""){
      alert("请选择文件");
      return false;
     }else{
   alert("复选值为:"+val);
  }
 }
</script>
	</head>
	<body>
		<table id="table1" width="100%" border="1" align="center"
			cellpadding="0" cellspacing="0">
			<tr>
				<td>
					文件
				</td>
				<td>
					列表框
				</td>
				<td>
					单选
				</td>
				<td>
					复选
				</td>
			</tr>
			<tr>
				<td>
					文件A
				</td>
				<td>
					<select name="lbka">
						<option value="lbka1">
							文件A1
						</option>
						<option value="lbka2">
							文件A2
						</option>
					</select>
				</td>
				<td>
					<input type="radio" name="dx" value="dxa">
				</td>
				<td>
					<input type="checkbox" name="fx" value="fxa">
				</td>
			</tr>
			<tr>
				<td>
					文件B
				</td>
				<td>
					<select name="lbkb">
						<option value="lbkb1">
							文件B1
						</option>
						<option value="lbkb2">
							文件B2
						</option>
					</select>
				</td>
				<td>
					<input type="radio" name="dx" value="dxb">
				</td>
				<td>
					<input type="checkbox" name="fx" value="fxb">
				</td>
			</tr>
			<tr>
				<td colspan="4">
					<a href="#" οnclick="a();">单选A选中</a>
					<a href="#" οnclick="b();">单选A不选中</a>
					<a href="#" οnclick="c();">复选A选中</a>
					<a href="#" οnclick="d();">复选A不选中</a>
					<a href="#" οnclick="e();">复选全选</a>
					<a href="#" οnclick="f();">复选全不选</a>
					<a href="#" οnclick="g();">选中列表框文件A2</a>
					<a href="#" οnclick="h();">取得选中列表框A的值,文本</a>
					<a href="#" οnclick="m();">判断单选选择</a>
					<a href="#" οnclick="j();">判断复选选择</a>
				</td>
			</tr>
		</table>
	</body>
</html>
 
majiwei_wh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js动态设置单选输入框(radio)选中状态
I_recluse的博客
07-26 1万+
有时需要在js中动态控制单选输入框的选中状态，这一般有两种方法： 1.通过设置input单选输入框的元素属性“checked”为“checked”，但需要注意的是，要把上一次设置的“checked”属性去掉，不然再次点击同一个元素的时候，选中状态就会错误。 2.通过设置input单选输入框的DOM节点属性“checked”为true或false来实现。 下面通过一个例子来说明两种方法，这个例...
js操作单选框选中
qq_51554120的博客
04-25 2755
$("input[type='radio'][name='commentOrSuggestion']").get(0).checked = true;
js 控制选择框
shanliang
07-16 1618
通过javascript控制选择框，实现添加/删除 选项，获得选中项信息，以及两个选择框之间的选项移动 html <form> <select multiple> <option value="wudi zz">wudi</option> <option>banyu</option> <option value="yichen 66">yichen</opt
jq——监听input组件type=“radio“单选框的change事件——基础积累
yehaocheng520的博客
02-01 5100
jq——监听input组件type="radio"单选框的change事件——基础积累
JavaScript单选框选择操作
P7295的博客
05-16 6411
废话不多说来看原图： 当点击全选按钮的时候，项目复选框全高亮，反之字面意思 反选则为当前勾选项目取消，无勾选项目则被勾选。 步骤 一.写入html内容 input type属性值要改为"checkbox"单选框。 二.写入JavaScript实现功能 在button按钮属性值里设置各自id， 在JavaScript中通过文档获取到该id， 绑定点击事件，for循环遍历所有单选框， 遍历的数组集通过改变属性值的布尔值来显示高亮效果。 反选按钮需要做一个有效的判断来确定...
JavaScript网页特效范例宝典源码
09-04
实例078 通过JavaScript控制表单的提交与重置 122 实例079 带记忆功能的表单 123 实例080 防止表单重复提交 124 实例081 自动提交表单 125 实例082 通过for循环获取表单元素的中文名称 126 实例083 可以提交到不同...
JavaScript实用范例词典04-14
03-31
9.39 选中单选按钮改变网页背景颜色... 288 9.40 检验一个复选框是否选中... 289 9.41 检验一组复选框是否选中... 290 9.42 检验两个复选框是否同时选中... 291 9.43 解除所有复选框的选中... 292 9.44 全选...
精通JS脚本之ExtJS框架.part2.rar
03-02
7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的...
精通JS脚本之ExtJS框架.part1.rar
03-02
7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的...
react-tabbordion:通用，仅语义和CSS的支持React状态管理组件，用于创建手风琴和制表符
05-14
键盘的用法与单选按钮（或使用multiple模式时的复选框）的用法相同； 该组件避免了重新设计轮子，并在可能的情况下利用了本机浏览器的行为，这就是为什么即使完全支持​​箭头键和智能焦点行为也看不到任何与键盘...
layui单选框通过js控制选择
qq_39280563的博客
04-08 1591
通过js控制layui单选按钮，
js 操作单选框
yixian918的专栏
04-21 866
New Document                    /*           *功能：居住在海南选"是"，城市选"海口"，选否，则不选城市           */          function check(){                    var province = document.getElementsByName("provin
利用JS实现单选和复选，还有全选按钮
qq_62881798的博客
03-07 3160
效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- checked="checked" 控制单选 复选 选中 --> <input id="checkAll" type="checkbox">全选&l
js控制单选复选框（全选)
weixin_33782386的博客
03-17 248
//获取单选按钮的选项值 function f1() { //radio集合 var radios = document.getElementsByName("sex"); for (var i = 0; i < radios.length; i++) { ...
js控制单选按钮选中某一项
weixin_30514745的博客
07-19 1264
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> -...
JavaScript：radio单选框的控制
qq_31382201的博客
03-21 1921
不可编辑:$('td[cellname=emailSuffix] :radio' ).attr('disabled',true);取值：var emailsuffix = $("td[cellname=emailSuffix] input:checked").val(); $("input[id='H13'][value='首次印刷']").attr("checked",true); 改变radi...
js控制单选框
weixin_30950607的博客
01-11 585
<input id="rbtn_Select" runat="server" type='radio' name='rbtn_Select' value= '<%#Eval("guid") %>' onclick="changeName(this)" /> <script> //让所有radio取消选中 function change...
利用原生js和jQuery实现单选框的勾选和取消操作
热门推荐
祥哥的专栏--每一天
08-30 1万+
根据一下的Demo，大概就可以看的明白 Demo:<html> <head> <script src='jquery-1.9.1.min.js'></script> <script> window.onload = function(){ var dom_a = document.getElementById('a1'); var dom_b = docum
js设置单选框选中，取消
菜鸟的专栏
05-18 1万+
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;meta htt
原生JavaScript单选框联动
最新发布
07-28
当一个单选框选中时，我们可以使用JavaScript来实现与其他单选框的联动效果。以下是一个示例代码： ```html <!DOCTYPE html> 单选框联动示例 请选择： (event)">苹果 (event)">橙子 (event)">香蕉 你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值