checkbox二选一的延伸
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了checkbox二选一的延伸相关的知识，希望对你有一定的参考价值。
这几天在某公司进行实习，测试平台环境是发现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二选一的延伸的主要内容，如果未能解决你的问题，请参考以下文章