关于复选框checkbox用作为单选框的方法

例子:

    <form>
		请选择你爱好:<br>
		<input type="checkbox" name="hobby" id="hobby1" οnclick="danxuan(this.id)">  音乐
		<input type="checkbox" name="hobby" id="hobby2" οnclick="danxuan(this.id)">  登山
		<input type="checkbox" name="hobby" id="hobby3" οnclick="danxuan(this.id)">  游泳
		<input type="checkbox" name="hobby" id="hobby4" οnclick="danxuan(this.id)">  阅读
		<input type="checkbox" name="hobby" id="hobby5" οnclick="danxuan(this.id)">  打球
		<input type="checkbox" name="hobby" id="hobby6" οnclick="danxuan(this.id)">  跑步 <br>
		<input type="button" value = "全选" onclick = "checkall();">
		<input type="button" value = "全不选" onclick = "clearall();">
		<p>请输入您要选择爱好的序号,序号为1-6:</p>
		<input id="wb" name="wb" type="text" >
		<input name="ok" type="button" value="确定" onclick = "checkone();">
	</form>
	<script type="text/javascript">
		// 复选框checkbox用作为单选框
		function danxuan(thisid){
			var hobby = document.getElementsByName("hobby");
			var index;
			for (var i=1;i<hobby.length + 1;i++) {
				document.getElementById("hobby" + i).checked = false;
			}
			document.getElementById(thisid).checked = true;
		}

		// 任务1
		function checkall(){
			var hobby = document.getElementsByTagName("input");
			for (var i=0;i<hobby.length-1;i++)
				hobby[i].checked=true;
		}
		// 任务2 
		function clearall(){
			var hobby = document.getElementsByName("hobby");
			for (var i=0;i<hobby.length-1;i++)
			hobby[i].checked=false;
		}
		// 任务3
		function checkone(){
			var j=0;
			j=parseInt(document.getElementById("wb").value);
			var hobby = document.getElementsByName("hobby");
			switch(j){
				case 1: hobby[0].checked=true;
			            break;
				case 2: hobby[1].checked=true;
						break;
				case 3: hobby[2].checked=true;
			            break;        
				case 4: hobby[3].checked=true;
						break;        
				case 5: hobby[4].checked=true;
				        break;        
				case 6: hobby[5].checked=true;
				        break;
				default:
						break;
			}
		}
	</script>

(ps:本人也在学习中,如上述代码有bug或者更简单的方式,欢迎批评指教)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值