jquery 后台返回的单选框按照两列展示_jq 多行radio,每行2列-CSDN博客

本文链接：https://blog.csdn.net/taiguolaotu/article/details/136475501
jquery代码
<!DOCTYPE html>
<html>
	<head>
		<!-- <meta charset="GBK"> -->
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<form>
		<body>
			<table id="myTable">  
				<tbody id="product_type_radio"></tbody>
			</table>
		</body>
	</form>

</html>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	
	
		var listDetail = {
	"label_list":[
		{
		
		"id":"11",
		"name":"22",
		"propertyList":[
			{"id":"id",
			"name":"name"},
			{"id":"idd",
			"name":"namee"},
			{"id":"1",
			"name":"1"}
		]},
	
		{
		
		"id":"111",
		"name":"222",
		"propertyList":[
			{"id":"idd",
			"name":"nameee"},
			{"id":"iddd",
			"name":"nameeee"}
		]},
		
		{
		
		"id":"1111",
		"name":"2222",
		"propertyList":[
			{"id":"iddd",
			"name":"nameeeee"},
			{"id":"idddd",
			"name":"nameeeeee"}
		]},
		
		{
		
		"id":"1111",
		"name":"2222",
		"propertyList":[
			{"id":"iddd",
			"name":"nameeeee"},
			{"id":"idddd",
			"name":"nameeeeee"}
		]},
		{
		"id":"1111",
		"name":"2222",
		"propertyList":[
			{"id":"iddd",
			"name":"nameeeee"},
			{"id":"idddd",
			"name":"nameeeeee"}
		]}
	]
	}
	
	   var listDetail= listDetail.label_list;
	   

	   if (listDetail != null) {
	       var listLength = listDetail.length; 
		   console.log('listLength'+listLength);
	       for (var j = 0; j < listDetail.length; j=j+2) {
			   console.log('listLength/2'+listLength%2);
	           //标签名称
			  var rows ; 
			 rows='<td>' + listDetail[j].name + ' :';
	   
	           var logInfo = listDetail[j].propertyList;
	           if (logInfo != null) {
	               for (var jj = 0; jj < logInfo.length; jj++) {
	                   var logInfoElement = logInfo[jj];
					//保证name相同  传递给后台的值
					 rows+='<input type="radio" id="' + logInfoElement.id + '" value="' + logInfoElement.id + '" name="' + listDetail[j].name + '"/>  <label for="option1">' + logInfoElement.name + '</label>';
				     // rows+='<input disabled="true" type="radio" id="' + logInfoElement.id + '" value="' + logInfoElement.id + '" name="' + listDetail[j].name + '"/>  <label for="option1">' + logInfoElement.name + '</label>';
				   }
	           }
			   
				// $("#product_type_radio").append('<tr>'+rows+'</td>');
				
				var rows1 ='';
				if(listDetail[j+1]){
					var logInfo1 = listDetail[j+1].propertyList;
					if (logInfo1 != null) {
						rows1 ='<td>' + listDetail[j+1].name + ' :';
					    for (var jj = 0; jj < logInfo1.length; jj++) {
					        var logInfoElement = logInfo1[jj];
							//rows1+='<input disabled="true" type="radio" id="' + logInfoElement.id + '" value="' + logInfoElement.id + '" name="' + listDetail[j].name + '"/>  <label for="option1">' + logInfoElement.name + '</label>';
						    rows1+='<input type="radio" id="' + logInfoElement.id + '" value="' + logInfoElement.id + '" name="' + listDetail[j].name + '"/>  <label for="option1">' + logInfoElement.name + '</label>';
						   }
					}
				}
				
				if(rows1 !== ''){
					$("#product_type_radio").append('<tr>'+rows+'</td>'+rows1+'</td></tr>');
				}else{
					$("#product_type_radio").append('<tr>'+rows+'</td></tr>');
				}
								
		   }
	   }	
	   
	   var array = ["id","idd"];	   
	   $('input[type="radio"]').each(function() {  
	     // 这里的`this`指向当前遍历到的单选按钮元素  
	     console.log($(this).val()); // 打印当前单选按钮的值  
		 if(array.includes($(this).val())){
			 document.getElementById($(this).val()).checked = true;  
		 }
	   });
	
</script>
效果图
在这里插入图片描述