利用JavaScript控制单选框

作者：菜鸟追梦旅行 | 2024-05-23 15:50:43

踩

js控制单选框


<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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/613499