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>

多选框只能选一个

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;
        }
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值