多选框获取所选内容

最新推荐文章于 2022-07-27 10:49:09 发布

叉会儿腰

最新推荐文章于 2022-07-27 10:49:09 发布

阅读量380

点赞数

分类专栏：小技巧

本文链接：https://blog.csdn.net/qq_33633350/article/details/79819428

版权

小技巧专栏收录该内容

4 篇文章 0 订阅

订阅专栏

页面

<dl>
				<dd>下发省份：</dd>
				<dd style="width:320px;height:auto;" class="selectOption">
					<label for="">
						<input type="checkbox" class="selectAll"/> 全选 
					</label>
					<label for="">
						<input type="checkbox" class="option" value="北京" /> 北京 
					</label>
					<label for="">
						<input type="checkbox" class="option" value="天津"  /> 天津 
					</label>
					<label for="">
						<input type="checkbox" class="option" value="上海"  /> 上海 
					</label>
					<label for="">
						<input type="checkbox" class="option" value="重庆"  /> 重庆 
					</label>
					<label for="">
						<input type="checkbox" class="option" value="河北"  /> 河北 
					</label>    
				</dd>
			</dl>

js内容：

全选：

	$(".selectAll").on("click",function(){
		if($(this).prop("checked")){
			$(".option").prop("checked",true);
		}else{
			$(".option").prop("checked",false);
		}
	})
	$(".option").on("click",function(){
		if(!$(this).prop("checked")){
			$(".selectAll").prop("checked",false);
		}
	})

获取所选内容：

function save(){
	var length = $(".option").length;
	var province = [];
	for(var i=0;i<length;i++){
		if($(".option").eq(i).prop("checked")){
			province.push($(".option").eq(i).val())
		}
	}
	var str = province.join(",")                    //将省份加间隔“ ，”输出
	
}

eq() 方法将匹配元素集缩减值指定 index 上的一个。

编辑：

function change(data){
	$("#id").val(data.id);
	var arr = data.str.split(",");                   //将省份遍历出来
	var length = $(".option").length;
	for(var i=0;i<arr.length;i++){
		for(var j=0;j<length;j++){
			if($(".option").eq(j).val() == arr[i]){
				$(".option").eq(j).prop("checked",true)
			}
		}
	}

split() 方法用于把一个字符串分割成字符串数组。