jquery多选框，上篇文章后续

最新推荐文章于 2024-08-27 21:06:27 发布

taiguolaotu

最新推荐文章于 2024-08-27 21:06:27 发布

阅读量387

点赞数 9

分类专栏：浅谈前端文章标签： jquery okhttp 前端

本文链接：https://blog.csdn.net/taiguolaotu/article/details/135863940

版权

浅谈前端专栏收录该内容

51 篇文章 1 订阅

订阅专栏

文章介绍了如何在HTML页面中使用jQuery库，结合AJAX和getJSON方法从服务器请求跨域数据，并将接收到的数据动态插入到表格中的复选框及其标签中。同时展示了如何获取被选中的复选框值并提交到服务器。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<!-- <meta charset="GBK"> -->
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<form>
		<body>
			<table id="myTable">  
			  <tr>  
			    <td>黄1</td>  
			  </tr>  
			  <tr>  
			    <td>行2</td>  
			  </tr>  
			  <tr>  
			    <td>行3</td>  
			  </tr>  
			</table>
		</body>
	</form>
	
	<button id="button">点击我</button>
	<!-- <button id="button" onclick="submit">点击我</button> -->
</html>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {  
	debugger
  // 获取表格的所有行  
//var rows = $('#myTable tr');  
//$(rows).append('<input type="checkbox" />');  

  
 // 1、getJSON方法请求数据
 // $.getJSON("date.json", "", function(response) { 
 // 	console.log(response)
 // 	debugger
 // //	  var rows = $('#myTable tr');  
 // 	  var rows = $('#myTable tr:eq(0)');  
 // 	  var name = $('#myTable tr:eq(0) td').text();  
 // 	  $.each(response, function(index, item) {  
 // 	    // 假设每个数据项有一个"value"属性表示复选框的值  
 // 	    var checkbox = $('input[type="checkbox"][value="' + item.value + '"]'); // 选择对应的复选框
 // //	    $(rows).append('input[type="checkbox"][value="' + item.value + '"]'); // 选择对应的复选框
 // //	  $(rows).append('<input type="checkbox" id="option1" value="'+value1+'" /> <label for="option1">'+item+'</label>'); // 选择对应的复选框
 // 		$(rows).append('<input type="checkbox" id="'+item+'" value="'+item+'" checked="true" name="'+name+'"/>  <label for="option1">'+item+'</label>'); // 选择对应的复选框
 // //	  var checkbox = $('input[type="checkbox"][value="' + item + '"]'); 
 // //	  $(rows).append(checkbox); // 选择对应的复选框
 // //	    checkbox.prop('checked', true); // 将复选框设置为选中状态  
 // 	  }) 
 // });

  
// 2、ajax方法请求数据
// $.ajax({  
// url:"./date.json",
// type: "get", // 或者使用POST，根据你的接口要求  
// success: function(response) { 
// 	console.log(response)
// 	debugger
// //	  var rows = $('#myTable tr');  
// 	  var rows = $('#myTable tr:eq(0)');  
// 	  var name = $('#myTable tr:eq(0) td').text();  
// 	  $.each(response, function(index, item) {  
// 	    // 假设每个数据项有一个"value"属性表示复选框的值  
// 	    var checkbox = $('input[type="checkbox"][value="' + item.value + '"]'); // 选择对应的复选框
// //	    $(rows).append('input[type="checkbox"][value="' + item.value + '"]'); // 选择对应的复选框
// //	  $(rows).append('<input type="checkbox" id="option1" value="'+value1+'" /> <label for="option1">'+item+'</label>'); // 选择对应的复选框
// 		$(rows).append('<input type="checkbox" id="'+item+'" value="'+item+'" checked="true" name="'+name+'"/>  <label for="option1">'+item+'</label>'); // 选择对应的复选框
// //	  var checkbox = $('input[type="checkbox"][value="' + item + '"]'); 
// //	  $(rows).append(checkbox); // 选择对应的复选框
// //	    checkbox.prop('checked', true); // 将复选框设置为选中状态  
// 	  }) 
// },  
// });


//3、第三种解决办法 适用于前两种 HBuilder中 ajax或者getJSON方法请求跨域的情况
var response = [
"1","2","3"
]
	console.log(response)
	debugger
//	  var rows = $('#myTable tr');  
	  var rows = $('#myTable tr:eq(0)');  
	  var name = $('#myTable tr:eq(0) td').text();  
	  $.each(response, function(index, item) {  
	    // 假设每个数据项有一个"value"属性表示复选框的值  
	    var checkbox = $('input[type="checkbox"][value="' + item.value + '"]'); // 选择对应的复选框
//	    $(rows).append('input[type="checkbox"][value="' + item.value + '"]'); // 选择对应的复选框
//	  $(rows).append('<input type="checkbox" id="option1" value="'+value1+'" /> <label for="option1">'+item+'</label>'); // 选择对应的复选框
		$(rows).append('<input type="checkbox" id="'+item+'" value="'+item+'" checked="true" name="'+name+'"/>  <label for="option1">'+item+'</label>'); // 选择对应的复选框
//	  var checkbox = $('input[type="checkbox"][value="' + item + '"]'); 
//	  $(rows).append(checkbox); // 选择对应的复选框
//	    checkbox.prop('checked', true); // 将复选框设置为选中状态  
	  }) 


 var form = $('form');  
    
  // 应用样式  
  form.css({  
//  'background-color': 'red',  
//  'color': 'white' , 
    
'width':'300px',
  'margin': '20px auto',
  
 'margin-bottom': '10px',

  'display': 'inline-block',
//width: 100px,
  'text-align': 'right',

//'width': '200px',
  'padding': '5px',

'background-color': '#4CAF50',
'color': 'white',
  'padding': '10px 15px',
  'border': 'none',
  'cursor': 'pointer'

  });  
});



$("#button").click(function(){
debugger
//  const ss = [];
    var ss = [];
//$('input[type=checkbox]:checked').each(function(){
	ss.push($(this.value));
//	ss.push(this.value);
//});
//ss = $('input[name="黄1"]:checked').serializeArray();
$('input[name="黄1"]:checked').each(function(){
	ss.push(this.value);
});
console.log(ss)
})
</script>

在这里插入图片描述