根据JSON的值设置radio选中状态

说明:页面有一组单选按钮radio,现在页面发送请求得到一组json数据,包括radio的值。
需要根据JSON中的值绑定radio的选中状态>


<table class="table" id="attachTable">
			<tbody>
				<!-- A.生產良率 是否達標 -->
				<tr>
					<th>A.生產良率 是否達標</th>
					<th><label class="radio-inline"> <input type="radio"
							name="buildYieldIsOk" value="1"></label></th>
					<th><label class="radio-inline"> <input type="radio"
							name="buildYieldIsOk" value="0" checked="checked"></label></th>
					<th><a class="op" data-type="buildYield">上傳</a></th>
					<th><a class="attach" id="buildYield"></a></th>
					<th><a class="delete" id="1"></a></th>
				</tr>
				<!-- B.NPI build Issue Summary 有無異常 -->
				<tr>
					<th>B.NPI build Issue Summary 有無異常</th>
					<th><label class="radio-inline"> <input type="radio"
							name="isHasBuildIssue" value="1"></label></th>
					<th><label class="radio-inline"> <input type="radio"
							name="isHasBuildIssue" value="0" checked="checked"></label></th>
					<th><a id="viewBuildIssueA">查看</a></th>
					<th></th>
				</tr>
				<!-- C.NPI test Issue Summary 有無異常 -->
				<tr>
					<th>C.NPI test Issue Summary 有無異常</th>
					<th><label class="radio-inline"> <input type="radio"
							name="isHasTestIssue" value="1"></label></th>
					<th><label class="radio-inline"> <input type="radio"
							name="isHasTestIssue" value="0" checked="checked"></label></th>
					<th><a id="viewTestIssueA">查看</a></th>
					<th></th>
				</tr>
				<!-- D.DFM Summary 有無異常   有上传 -->
				<tr>
					<th>D.DFM Summary 有無異常</th>
					<th><label class="radio-inline"> <input type="radio"
							name="dfmIsOk" value="1"></label></th>
					<th><label class="radio-inline"> <input type="radio"
							name="dfmIsOk" value="0" checked="checked"></label></th>
					<th><a class="op" data-type="dfm">上傳</a></th>
					<th><a class="attach" id="dfm"></a></th>
					<th><a class="delete" id="2"></a></th>
				</tr>
				<!-- E.DFT Summary 有無異常  有上传 -->
				<tr>
					<th>E.DFT Summary 有無異常</th>
					<th><label class="radio-inline"> <input type="radio"
							name="dftIsOk" value="1"></label></th>
					<th><label class="radio-inline"> <input type="radio"
							name="dftIsOk" value="0" checked="checked"></label></th>
					<th><a class="op" data-type="dft">上傳</a></th>
					<th><a class="attach" id="dft"></a></th>
					<th><a class="delete" id="3"></a></th>
				</tr>
			</tbody>
		</table>

  json数据

在这里插入图片描述
使用JavaScript完成,当然也可以用其他JS,VueJs等

    //radio
	$("#attachTable :input").each(function(){
		if (this.name in npi2mpData) {
			//console.log(this.name,npi2mpData[this.name]);
			$("input[name="+this.name+"]").each(function(index){
				if($("input[name="+this.name+"]").get(index).value == npi2mpData[this.name] ){
					$("input[name="+this.name+"]").get(index).checked = true;
				}
			});
		}
	});

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

posted @ 2019-09-02 14:09  gqzdev  阅读(391)  评论(0编辑  收藏  举报