html复选框实现单选效果JS实现

原创
2017/06/12 09:56
阅读数 113

Html

<div style="line-height: 4"><strong>类型:</strong>
				<label><input name="companytype" type="checkbox"  onclick="removeCompanyChecked(this)" value="1"/><span class="rdContent">&nbsp;&nbsp;A.国</span> </label>&nbsp;&nbsp;
				<label><input name="companytype" type="checkbox"  onclick="removeCompanyChecked(this)" value="2"/><span class="rdContent">&nbsp;&nbsp;B.民</span> </label>&nbsp;&nbsp;
				<label><input name="companytype" type="checkbox" onclick="removeCompanyChecked(this)"  value="3"/><span class="rdContent">&nbsp;&nbsp;C.合</span> </label>&nbsp;&nbsp;
				<label><input name="companytype" type="checkbox" onclick="removeCompanyChecked(this)"  value="4"/><span class="rdContent">&nbsp;&nbsp;D.外</span> </label>
			</div>
			<div class="qa-hr"></div>
			<div style="line-height: 2"><strong>日期:</strong>
				<label><input name="establishdate" type="checkbox" onclick="removeEstabChecked(this)" value="1"/><span class="rdContent">&nbsp;&nbsp;A.3年</span> </label>&nbsp;&nbsp;
				<label><input name="establishdate" type="checkbox" onclick="removeEstabChecked(this)" value="2"/><span class="rdContent">&nbsp;&nbsp;B.5年</span> </label>&nbsp;&nbsp;
				<label><input name="establishdate" type="checkbox" onclick="removeEstabChecked(this)" value="3"/><span class="rdContent">&nbsp;&nbsp;C.10年</span> </label>&nbsp;&nbsp;
				<label><input name="establishdate" type="checkbox" onclick="removeEstabChecked(this)" value="4"/><span class="rdContent">&nbsp;&nbsp;10年以上</span> </label><br/><br/>
			</div>


JS:

<script>
		function removeCompanyChecked(obj){
				 var aa = $("input[name='companytype']:checked ");
				 for (var i = 0; i < aa.length; i++) {
				  aa[i].checked = false;
				 }
				 obj.checked = true;
		}
		function removeEstabChecked(obj){
				 var aa = $("input[name='establishdate']:checked ");
				 for (var i = 0; i < aa.length; i++) {
				  aa[i].checked = false;
				 }
				 obj.checked = true;
		}
		</script>

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部