jQuery操作checkbox

最新推荐文章于 2024-04-01 19:33:10 发布

jj_小白历险记

最新推荐文章于 2024-04-01 19:33:10 发布

阅读量152

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_574745116/article/details/105838669

版权

最近需要对checkbox做一系列的操作，判断checkbox是否被选中，将选中的checkbox的value赋值为1，未被选中的赋值为0，然后组成banana=1&watermelon=1&mango=0&……json字符串的形式返回。接下来我对我用的方法整理了一下，如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

	<input type="checkbox" value="橘子" name="orange" id="arry0">橘子1</input>
        <input type="checkbox" value="香蕉" name="banana" id="arry1">香蕉1</input>
        <input type="checkbox" value="西瓜" name="watermelon" id="arry1">西瓜1</input>
        <input type="checkbox" value="芒果" name="mango" id="arry1">芒果1</input>
        <input type="checkbox" value="葡萄" name="putao" id="arry2">葡萄1</input>
        
        <input type="button" value="返回json" id="b2">

<script>
       
	/**
	*方法-获取所有id开头为arry1的checkbox数组input[id*="xxx"]'
	*返回json对象,key=name,value=value
	*/
	function getcheckboxsvalueJSON(checkboxid){
		var ckbox_temp = {};//存储选中的值的json
            $.each($("input[id*='"+checkboxid+"']:checkbox"),function(){
                if(this.checked){
		    //$(this).val()
		    ckbox_temp[$(this).attr('name')]= 1;//这里是选中情况下大家可以写一些自己需要的操作
                }else{
		    ckbox_temp[$(this).attr('name')]= 0;//这里是未被选中情况下大家可以写一些自己需要的操作
				}
            });
		return ckbox_temp;
	}
	
	$("#b2").click(function(){
		var Jsoncheckoxs=getcheckboxsvalueJSON('arry1');
		var params = Object.keys(Jsoncheckoxs).map(function (key) {  
			return encodeURIComponent(key) + "=" + encodeURIComponent(Jsoncheckoxs[key]); }).join("&");
		window.alert(params);
		//window.alert(JSON.stringify(Jsoncheckoxs));
	});

    </script>

</body>
</html>

一个小问题的记录，如果对大家有帮助更好！

jj_小白历险记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作checkbox

最近需要对checkbox做一系列的操作，判断checkbox是否被选中，将选中的checkbox的value赋值为1，未被选中的赋值为0，然后组成banana=1&watermelon=1&mango=0&……json字符串的形式返回。接下来我对我用的方法整理了一下，如下：<!DOCTYPE html><html><head>...
复制链接

扫一扫