jquery判断选中的checkbox的value值,并把value值用逗号隔开变成字符串

最新推荐文章于 2024-03-04 15:28:47 发布

原创最新推荐文章于 2024-03-04 15:28:47 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#成长

前端基础专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现多选框（Checkbox）双向绑定的方法。通过点击事件切换多选框的状态，并演示了如何获取已选中的多选框值。

<div class="checkbox">
	    <input type="checkbox" name="checkbox1" value="书1" class="motaiCheckbox">书1
	    <input type="checkbox" name="checkbox1" value="书2" class="motaiCheckbox">书2
	    <input type="checkbox" name="checkbox1" value="书3" class="motaiCheckbox">书3
	</div>
<input type="button" id="btn" value="yinxing">

$(function(){
	 $('[type="checkbox"]').each(function(){
	     $(this).click(function(){
		 if( $(this).attr('checked') ) {
		       $(this).removeAttr('checked')
		 }else{
		       $(this).attr('checked', 'checked')
		 }
			
	     })
	 })
})
//获取已选中的多选框
// var Checkbox = $('.checkbox').find('input:checked');
$("#btn").click(function () {
	console.log($(".motaiCheckbox[checked]"));
    var a = [];
    var b;
    $(".motaiCheckbox[checked]").each(function(){
        alert($(this).val()); 
        a.push($(this).val())
    });
    console.log(a);
    b = a.join(",");
    console.log(b);
})

上述方法先给checkbox绑定checked属性,再循环获取值。