论坛首页 入门技术论坛

利用JavaScript控制单选框

浏览 3357 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-12-04   最后修改:2008-12-04
<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" onclick="f(1);" />
		<input type="button" name="s2" value="OK2" onclick="f(2);" />
		<input type="button" name="s3" value="OK3" onclick="f(3);" />
		<input type="button" name="s4" value="OK4" onclick="f(4);" />
		<input type="button" name="s5" value="OK5" onclick="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="#" onclick="a();">单选A选中</a>
					<a href="#" onclick="b();">单选A不选中</a>
					<a href="#" onclick="c();">复选A选中</a>
					<a href="#" onclick="d();">复选A不选中</a>
					<a href="#" onclick="e();">复选全选</a>
					<a href="#" onclick="f();">复选全不选</a>
					<a href="#" onclick="g();">选中列表框文件A2</a>
					<a href="#" onclick="h();">取得选中列表框A的值,文本</a>
					<a href="#" onclick="m();">判断单选选择</a>
					<a href="#" onclick="j();">判断复选选择</a>
				</td>
			</tr>
		</table>
	</body>
</html>
 
论坛首页 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics