jquery 后台返回的单选框按照两列展示

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>

效果图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/512140.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何搭建Nacos集群

1.搭建Nacos集群 众所周知&#xff0c;在实际的工作中&#xff0c;Nacos的生成环境下一定要部署为集群状态 其中包含3个nacos节点&#xff0c;然后一个负载均衡器代理3个Nacos。这里负载均衡器可以使用nginx。 我们计划的集群结构&#xff1a; 我就直接在本机上开三个Nacos来搭…

五、mysql 数据库体系结构

目录 MySQL体系结构 一、MySQL的Server层有七个组件 1、MySQL 向外提供的交互接口&#xff08;Connectors&#xff09; 2、连接池组件&#xff08;Connection Pool&#xff09; 3、管理服务组件和工具组件&#xff08;Management Service & Utilities&#xff09; 4、…

金三银四,程序员如何备战面试季

金三银四&#xff0c;程序员如何备战面试季 一个人简介二前言三面试技巧分享3.1 自我介绍 四技术问题回答4.1 团队协作经验展示 五职业规划建议5.1 短期目标5.2 中长期目标 六后记 一个人简介 &#x1f3d8;️&#x1f3d8;️个人主页&#xff1a;以山河作礼。 &#x1f396;️…

2张图2秒钟3D重建!这款AI工具火爆GitHub,网友:忘掉Sora

只需2张图片&#xff0c;无需测量任何额外数据—— 当当&#xff0c;一个完整的3D小熊就有了&#xff1a; 这个名为DUSt3R的新工具&#xff0c;火得一塌糊涂&#xff0c;才上线没多久就登上GitHub热榜第二。 ▲image 有网友实测&#xff0c;拍两张照片&#xff0c;真的就重建…

uniapp微信小程序获取当前位置

uni-app微信小程序uni.getLocation获取位置&#xff1b;authorize scope.userLocation需要在app.json中声明permission&#xff1b;小程序用户拒绝授权后重新授权-CSDN博客

详解Java中集合的List接口实现的ArrayList方法 | Set接口实现的HashSet方法

集合的概念 当我们需要保存一组一样&#xff08;类型相同&#xff09;的元素的时候&#xff0c;我们应该使用一个容器来存储&#xff0c;数组就是这样一个容器。 ● 数组的特点&#xff1a; 数组是一组数据类型相同的元素集合&#xff1b; 创建数组时&#xff0c;必须给定…

Stable Diffusion 模型分享:3D Animation Diffusion(3D动漫)

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八 下载地址 模型介绍 3D Animation Diffusion 是 Lykon 大神的 3D 动漫模型。 作者述&#xff1a;在迪士尼、皮…

SPI相关知识总结

一、SPI 1.1SPI概念及通讯方式 SPI&#xff1a;串行外设设备接口&#xff08;Serial Peripheral Interface&#xff09;&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线 2.1 SPI框图 1.3.数据发送与接收流程 1.4 SPI工作模式 1&#xff09;时钟极…

【OpenGL编程手册08】 摄像机

一、说明 前面的教程中我们讨论了观察矩阵以及如何使用观察矩阵移动场景&#xff08;我们向后移动了一点&#xff09;。OpenGL本身没有摄像机(Camera)的概念&#xff0c;但我们可以通过把场景中的所有物体往相反方向移动的方式来模拟出摄像机&#xff0c;产生一种我们在移动的感…

LeetCode 2673. 使二叉树所有路径值相等的最小代价【贪心】1917

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

附录:jdk安装及环境变量的配置

jdk的安装 JDK &#xff08;Java Development Kit&#xff09;称为 Java 开发包或 Java 开发工具&#xff0c;是一个编写 Java 的 Applet 小程序和应用程序的程序开发环境。 下载jdk 在 oracle 官网中下载 jdk https://www.oracle.com/ 点击 JDK 下载自己需要的 JDK 版本&…