HTML 点选框(checkbox) 全选/全不选

要求:如图所示,新增标签栏,便签选项数目不固定。点选

1、页面显示便签点选框。

<!-- 显示获取的便签列表 -->            
<#list getList.list as item> 
<input type="checkbox" value="${item.cate_name!''} " class="checkBox" >${item.cate_name!''}          			            			         
</#list>	

2、设置全选。点击全选,将全选的状态遍历赋给其他选项

	// 点击全选或全不选	
    $('#search-from').on('click','#checkAll',function () {
    	var checkStatus = $(this).is(':checked') == true;    	
    	$('.checkBox').each(function() {
			$(this).prop('checked', checkStatus);
		});
    })

3、点击搜索。每次点击搜索时,遍历所有选项的属性checked,如果为true则添加到tag。遍历结束后即可得到选中的标签。

注意:获取属性值需注意,prop() 和 attr() 可能返回不同的值。prop()为true, attr() 为checked

    //点击搜索,刷新
	$('#search-from').on('click', '#search', function() {  
	    tag="";
		$('.checkBox').each(function() {
	    	if ($(this).prop('checked')) {
			tag+=$(this).val();   			
	    	}
	    });
	    alert(tag);
	    $('#tag').val(tag);
	    initserchgoods();
	});

’实际点选,后台打印输出

猜你喜欢

转载自blog.csdn.net/Henry_Lin_Wind/article/details/82773969