码迷,mamicode.com
首页 > 其他好文 > 详细

checkbox二选一的延伸

时间:2016-09-07 22:53:13      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:

  这几天在某公司进行实习,测试平台环境是发现Bug,所以自己想用自己的方式来解决。

  业务要求:

技术分享

四个勾选框:

1:主办和协办绑定在一起,也就是说选了主办或协办,或是一起勾选了,就不可以同时选择对外和任务

2:选择对外,就不可选主协办和任务

3:选择任务,就不可选主协办和对外

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
function check(obj){
if(obj.id == ‘duiwai‘ && obj.checked == true){
document.getElementById(‘renwu‘).checked = false;
document.getElementById(‘zhuban‘).checked = false;
document.getElementById(‘xieban‘).checked = false;
}
//选择对外,就不可选主协办和任务
else if(obj.id == ‘renwu‘ && obj.checked == true){
document.getElementById(‘duiwai‘).checked = false;
document.getElementById(‘zhuban‘).checked = false;
document.getElementById(‘xieban‘).checked = false;
}
//选择任务,就不可选主协办和对外
else if(obj.id == ‘zhuban‘ && obj.checked == true){
document.getElementById(‘duiwai‘).checked = false;
document.getElementById(‘renwu‘).checked = false;
}
//选择主办,对外和任务不可选
else if(obj.id == ‘xieban‘ && obj.checked == true){
document.getElementById(‘duiwai‘).checked = false;
document.getElementById(‘renwu‘).checked = false;
}
//选择协办,对外和任务不可选
}
</script>
</head>
<body>
<form>
主办:<input type="checkbox" id="zhuban" checked="checked" onclick = ‘check(this)‘><br>
协办:<input type="checkbox" id="xieban" checked="checked" onclick = ‘check(this)‘><br>
对外答复:<input type="checkbox" id="duiwai" onclick = ‘check(this)‘><br>
任务办结:<input type="checkbox" id="renwu" onclick = ‘check(this)‘>
</form>
</body>
</html>

这里我讲主协办设为默认勾选,与业务相符合。

心得:

1:晚上解决问题注意力比较集中

2:代码存在冗余问题,需要进一步解决(或存在更好的解决方法)

3:js有许多框架,正因为有这么多框架,所以js没有一个比较好的标准,还是要好好学原生js

4:讲道理,这家公司也不算菜,为什么这个问题不解决

 

checkbox二选一的延伸

标签:

原文地址:http://www.cnblogs.com/zhangjiabing/p/5851176.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!