JS - 获取选中复选框的值(checkBox)

qq_37131747

已于 2022-03-30 17:16:44 修改

阅读量6.4k

点赞数

分类专栏： JS 文章标签： javascript

于 2022-03-30 16:26:55 首次发布

原文链接：https://blog.csdn.net/weixin_38399962/article/details/80995858

版权

JS 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

jquery的checkbox取值赋值选中

<html lang="us">
<head>
    <meta charset="utf-8">
    <title>checkbox赋值测试</title>
    <link type="text/css" href="<%=basePath%>/resources/css/jquery-ui/jquery-ui.css" rel="stylesheet" />
 
</head>
<body>
    <h2>checkbox赋值测试</h2>
    <br/>
 
    <div class="form-group">
        <label>Checkboxes</label>
        <br/>
        <div class="checkbox">
            <label>
                <input type="checkbox"  name="chk" value="101">Checkbox 1
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"   name="chk" value="102">Checkbox 2
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"  name="chk"  value="103">Checkbox 3
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"   name="chk" value="104">Checkbox 4
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"   name="chk" value="105">Checkbox 5
            </label>
        </div>
    </div>
 
<br/>
 
    <button class="btn"     type="button" id="btnSelectAll">全选</button>
    <button class="btn"     type="button" id="btnSelectNull">全不选</button>
    <button class="btn"     type="button" id="btnSelect1and3">选1和3</button>
    
    <button class="btn"     type="button" id="btnGetVal">取值</button>
    
</body>
<script type="text/javascript" src="<%=basePath%>/resources/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/resources/js/jquery-ui/jquery-ui.js"></script>
<script>
 
$(function(){
	$("#btnSelectAll").click(function () {
		selectAll();
	});
	$("#btnSelectNull").click(function () {
		selectNull();
	});
	$("#btnSelect1and3").click(function () {
		select1and3();
	});
	$("#btnGetVal").click(function () {
		getVal();
	});
});
 
function selectAll(){
	$("input[name='chk']").each(function(){ 
		//$(this).attr("checked", true);
		this.checked=true;
	});
}
function selectNull(){
	$("input[name='chk']").each(function(){ 
		this.checked=false;
	});
}
function select1and3(){
	//先清空选项
	selectNull();
	var sel = [];
	sel.push("101");
	sel.push("103");
	for(var i=0;i<sel.length;i++){
		$("input[name='chk']").each(function(){ 
    		if ($(this).val() == sel[i]) {
    			this.checked=true;
    		} 
    	});
	}
}
function getVal(){
	var chk_value =[];//定义一个数组    
    $('input[name="chk"]:checked').each(function(){//遍历每一个名字为nodes的复选框，其中选中的执行函数    
    	chk_value.push($(this).val());//将选中的值添加到数组chk_value中    
    });
    var groups = chk_value.join(",");
    alert(groups);
}
 
</script>
</html>

方法一：
if ($("#checkbox-id").get(0).checked) {
    // do something
}

方法二：
if($('#checkbox-id').is(':checked')) {
    // do something
}

方法三：
if ($('#checkbox-id').attr('checked')) {
    // do something
}
判断复选框是否被选中的代码:
在jQuery1.6版本之后，取复选框有没有被选中，要用prop
$('#checkbox-id').prop('checked')//返回值是true或者false
 

设置复选框是否为选中的代码:
$("input[name='selectit']").prop("checked",true/false)

$("input[name='selectit']").prop("checked",$("#selectit").prop('checked'))

len = $('.joblist input[type="checkbox"]' ).length; //获取全部复选框数量
len_check = $('.joblist input:checked' ).length; //获取被选中的数量

qq_37131747

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JS - 获取选中复选框的值(checkBox)

获取选中复选框的值(checkBox)
复制链接

扫一扫

专栏目录

JS - 获取选中复选框的值(checkBox)

“相关推荐”对你有帮助么？