复选框实现单选效果js/jq

方法一:

<input type="checkbox" name="test" onclick="checkedThis(this);">1
<input type="checkbox" name="test" onclick="checkedThis(this);">2
<input type="checkbox" name="test" onclick="checkedThis(this);">3
<input type="checkbox" name="test" onclick="checkedThis(this);">4
<input type="checkbox" name="test" onclick="checkedThis(this);">5
<script>
function checkedThis(obj){
var boxArray = document.getElementsByName('test');
for(var i=0;i<=boxArray.length-1;i++){
if(boxArray[i]==obj && obj.checked){
boxArray[i].checked = true;
}else{
boxArray[i].checked = false;
}
}
}
</script>

方法二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
</head>
<body>
<table class="table table-hover"><tbody><tr class="unread"><td class="check-mail"><input type="checkbox" value="590c6af88838be1268cc1866"></td> <td>主管</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="591181599f82f91770b367f5"></td> <td>经理</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="591184209f82f91770b367f6"></td> <td>助理</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="591184269f82f91770b367f7"></td> <td>行政</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="591190079f82f91770b36800"></td> <td>科长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="5911b2d79f82f91770b3680b"></td> <td>班长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="5911b2dc9f82f91770b3680c"></td> <td>组长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="5911b2e19f82f91770b3680d"></td> <td>队长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="5911b2e69f82f91770b3680e"></td> <td>团长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="5911b2eb9f82f91770b3680f"></td> <td>军长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="59127536a07ead322cabc996"></td> <td>懂事长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="5912753ea07ead322cabc997"></td> <td>董事长</td></tr></tbody></table>
<ul>
<li><input type="checkbox">1</li>
<li><input type="checkbox">2</li>
<li><input type="checkbox">3</li>
<li><input type="checkbox">4</li>
<li><input type="checkbox">5</li>
</ul>
<script>
$(function(){
$(":checkbox").click(function(){
if($(this).attr("checked")!=undefined)
{
$(this).parent('td').parent('tr').siblings('tr').children('td').children('input').attr("checked",false);
$(this).attr("checked",true);
}
});
});
</script>

</body>
</html>
原文地址:https://www.cnblogs.com/cx709452428/p/js.html