如何让checkbox只允许选择一个

最新推荐文章于 2025-02-24 22:06:21 发布

原创最新推荐文章于 2025-02-24 22:06:21 发布 · 5.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何通过JavaScript实现将原生可多选的checkbox变为只能选择一个的状态。通过在每个checkbox上附加点击事件，当用户尝试选择时，先清除所有已选中的选项，然后设置当前点击的选项为选中状态。

如何让checkbox只允许选择一个：

需求：原生的checkbox可以选择多个,现在只能选一个

如图：
在这里插入图片描述
解决：
html代码：

<form name="myForm">
    	<table class="table1">
       <tr>
       		<td class="othertd">进入渠道</td>
            <td colspan="3">
            	<div id="checkboxDiv" class="checkbox">
				<input type="checkbox" name="weekSelHistory" value="1" onclick="selchk(this.value)"/>招工审批<br />
				<input type="checkbox" name="weekSelHistory" value="2" onclick="selchk(this.value)"/>毕业生<br />
				<input type="checkbox" name="weekSelHistory" value="3" onclick="selchk(this.value)"/>退伍安置<br />
				</div>	 
            </td>
        </tr>
		</table>
</form>

js代码:

 function selchk(thisValue)  //selchk为 checkbox控件，   前台每个checkbox控件都需加上这方法
    {
        var selectLen = document.myForm.weekSelHistory.length;
        for (j = 0; j < selectLen; j++) {
            if (eval("document.myForm.weekSelHistory[" + j + "].checked") == true) {
                document.myForm.weekSelHistory[j].checked = false;
                if (document.myForm.weekSelHistory[j].value == thisValue) {
                    document.myForm.weekSelHistory[j].checked = true;
                }
            }
        }
    }