关于checkbox传值问题

缺乏、安全感 2022-12-06 01:05 174阅读 0赞

最近不知道要写什么了，没有怎么学习新的知识点，而是一直在研究jquery相关的东西，有人说jquery已经快要过时了，很多公司都不用这个框架了，但是我觉得，有些知识，作为基础，还是要多回顾一下，记录一下。今天写了一个简单的功能，将checkbox选中的value值提交到后端。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>test</title>
    		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    	</head>
    	<body>
    		<div class="row">
    			<div class="form-group">
    				<label class="col-md-4 col-sm-4  col-xs-4 control-label">周期选择</label>
    				<div class="col-md-7 col-sm-7  col-xs-7">
    					<label><input name="circle" type="checkbox" value="2" />星期一</label>
    					<label><input name="circle" type="checkbox" value="3" />星期二 </label>
    					<label><input name="circle" type="checkbox" value="4" />星期三 </label>
    					<label><input name="circle" type="checkbox" value="5" />星期四 </label>
    					<label><input name="circle" type="checkbox" value="6" />星期五 </label>
    					<label><input name="circle" type="checkbox" value="7" />星期六 </label>
    					<label><input name="circle" type="checkbox" value="1" />星期日 </label>
    				</div>
    			</div>
    			<div>
    			<button onclick="submit()">submit</button></div>
    			<script type="text/javascript">
    				function submit() {
    					var params = {
    						circle: getCircle(),
    					}
    					alert(JSON.stringify(params));
    					$.ajax({
    						url: basePath + "/sign",
    						contentType: 'application/json',
    						data: JSON.stringify(params),
    						type: "POST",
    						success: function(data) {
    						}
    					});
    				}
    				//获取选中的周期
    				function getCircle() {
    					var str = "";
    					$("input[name='circle']").each(function() {
    						if($(this).prop("checked") == true) {
    							str += ($(this).val() + ",")
    						}
    					});
    					return str;
    				}
    			</script>
    	</body>
    </html>

![fc0cad20f4dbbdbd3264e2ac8de46022.png][]

[fc0cad20f4dbbdbd3264e2ac8de46022.png]: /images/20221123/d78bc5fbb6ba48f0bf06d502a531c1d8.png