js控制checkbox单选，获取checkbox的值，选中checkbox

最新推荐文章于 2024-04-02 19:39:43 发布

初生的太阳丶

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量1k

点赞数 1

分类专栏： js 前端技术文章标签： 1024程序员节

本文链接：https://blog.csdn.net/strive279/article/details/134008901

版权

js 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端技术

18 篇文章 1 订阅

订阅专栏

声明：网上的资料杂七杂八的搞得我一个不熟悉前端的后端开发者弄起来贼难受，现在将实现了的做一个整合，希望能给你们带来点帮助（主要还是帮助我自己(●ˇ∀ˇ●)，防止丢失）

html代码组件示例

<div style="width:200px;margin: 0 auto;">
	<div style="display: inline;">
	    <input name="GMS" type="checkbox" value="0" onClick="chooseOne(this,'GMS');"><span style="margin-left: 10px;">无</span>
	</div>
	<div style="display: inline;margin-left: 50px;">
	    <input name="GMS" type="checkbox" value="1" onClick="chooseOne(this,'GMS');"><span style="margin-left: 10px;">有</span>
	</div>
</div>

多选框只能选一个

function chooseOne(cb,name){
    //先取得同name的chekcBox的集合物件
    var obj = document.getElementsByName(name);
    for (var i = 0; i< obj.length; i++){
        //判斷obj集合中的i元素是否為cb，若否則表示未被點選
        if (obj[i]!=cb) obj[i].checked = false;
        //若是 但原先未被勾選 則變成勾選；反之 則變為未勾選
        else  obj[i].checked = cb.checked;
        //若要至少勾選一個的話，則把上面那行else拿掉，換用下面那行
        // else obj[i].checked = true;
    }
}

获取多选框选择的值

function getCheckboxValue(name){
    var checkboxs = document.getElementsByName(name);
    var checkedValues = [];
    for (var i = 0;i<checkboxs.length;i++){
        if (checkboxs[i].checked){
            checkedValues.push(checkboxs[i].value);
        }
    }
    return checkedValues;
}

根据内容勾选多选框

function checkBoxChecked(name,value){
    var checkboxs = document.getElementsByName(name);
    for (var i =0;i<checkboxs.length;i++) {
        if (value === checkboxs[i].values){
            checkboxs[i].checked = true;
        }
    }
}