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

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

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>
1
2
3
4
5
6
7
8

多选框只能选一个

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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

获取多选框选择的值

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;
}
1
2
3
4
5
6
7
8
9
10

根据内容勾选多选框

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;
        }
    }
}
1
2
3
4
5
6
7
8