Jquery判断单选或多选框是否选中

最新推荐文章于 2024-08-05 22:43:05 发布

学前端的渣渣辉

最新推荐文章于 2024-08-05 22:43:05 发布

阅读量653

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/w2898/article/details/131579873

版权

最近用jquery+js写了个表单验证，写个表单验证遇到很多问题，例如收集单选框和多选框的选中状态，有人说采用全选不行吗，问题是不会给你机会，一会单选一会多选，既然遇到了那就简单做个记录,
由于没找到原文作者，我看到的是已经转载的了，也没有附加原文链接，后期翻到会加上

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何获取多选框选中的值</title>
    </head>
    <script src="jquery.min.js"></script>
     
    <script>        
        var SaveCheck1 = function(){
            //通过id获取多选框是否选中
            var pinpong = $('#Pingpong').is(":checked");
            var badminton = $('#Badminton').is(":checked");
            var basketball = $('#Basketball').is(":checked");
            var billiards = $('#Billiards').is(":checked");    
            //在控制台输出选中值
            console.log("乒乓球："+pinpong);
            console.log("羽毛球："+badminton);    
            console.log("篮球："+basketball);    
            console.log("台球："+billiards);                        
        }
        
        var SaveCheck2 = function(){
            var arry = new Array();
            //循环所有选中的值
            $('input[name="Sports"]:checked').each(function(index, element) {
                //追加到数组中
                arry.push($(this).val());
            });
            //将数组元素连接起来转化为字符串
            var arrystr = arry.join(',');
            //输出到控制台
            console.log("选中值："+ arrystr);
        }
        
    </script>
    <body>
        <div>
            <span>运动类：</span>
            <div id="div1" style="position:relative;left:80px;margin-top:-16px;">
            <input type="checkbox" size="12" name="Sports" id="Pingpong"   value="1"/>乒乓球&nbsp;&nbsp;
            <input type="checkbox" size="12" name="Sports" id="Badminton"  value="2"/>羽毛球&nbsp;&nbsp;
            <input type="checkbox" size="12" name="Sports" id="Basketball" value="3"/>篮球&nbsp;&nbsp;
            <input type="checkbox" size="12" name="Sports" id="Billiards"  value="4"/>台球&nbsp;&nbsp;
            </div>
            <div id="div2" style="position:relative;left:80px;margin-top:10px;">
            <input type="button" value="提交1" onClick="SaveCheck1()"/>&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" value="提交2" onClick="SaveCheck2()"/>
            </div>       
        </div>    
    </body>
</html>

我是在他的基础上有所改动，但是思路都是一样的，只不过他这里的存储形式是数组，我的存储形式是字符串，所有的数据用数组存储虽好，由于页面中有很多表单元素，每个都需要each，然后追加进数组，最后在通过前端把数据追加进数据表中就会很乱，数据基本上都是循环了好多遍，废话不多说，代码上见，通俗易懂

	//先声明空的字符串，用于存放单选框或者多选框的值
	//为了以后自己能看明白，以下全部用拼音代替
	let danxuan= ''//用于存放单选框的值
	let duoxuan= ''//用于存放多选框的值
	$('.danxuaninput:radio:checked').each(function(index,element){
	//这里的index和element写不写的都行，没什么影响
	danxuan += $(this).val()
		})
	$('.duoxuaninput :checked').each(function(){
		//每个多选框的值用分号分隔
		duoxuan += $(this).val() + ';';
	})
	//这句话的意思不做过多解释，就是字面意思
	duoxuan = duoxuan.slice(0,duoxuan.length -1)