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>
效果图
