html 类似于单选按钮的效果

<html>
<script>
 
 function setvalue(x)
 {
  var value=document.getElementById("lb"+x).title;
  var hd11=document.getElementById("ksks").value;
hd11=value;
//document.getElementById("btn").value=hd11;
for(i=1;i<5;i++){
if(i==x){
 
document.getElementById("lb"+x).style.backgroundColor="red";
}else
{
document.getElementById("lb"+i).style.backgroundColor="";
}
}
document.getElementById("ksks").value=hd11;
 }
function ok()
{
alert(document.getElementById("ksks").value);
document.getElementById("btn").value=document.getElementById("ksks").value;
}


</script>


<form name="form1" action="" method="post"> 


<div name="c_hot_tad_login">


<p>年级           
      <div class="pi_content">
 <label id="lb1" title="1"    onClick="setvalue(1)" >12311111</label> 
</div>


<div class="pi_content">
       <label  id="lb2"  title="2"    onClick="setvalue(2)">22222</label> 
 </div>
<div class="pi_content">


       <label id="lb3" title="3"   onClick="setvalue(3)">33333</label> 
 </div>
<div class="pi_content">

       <label  id="lb4"  title="4"   onClick="setvalue(4)">44444</label> 
 </div>
<input type="text" id="ksks" value="" >


                       
<input type="button" value=""  size="15px" id="btn"  onClick=" ok()"/></div>


</form>
</html>
Button单选按钮是一种类似单选框(radio)的UI组件,用于在同一组Button组件只能选择一项。通过使用一组Button组件,我们可以实现单选效果。 然而,在实际应用,可能会遇到一个问题,即选的按钮在点击页面其他地方时不能继续保持选状态。解决这个问题的方法是将按钮放置在一个单选按钮组内。通过将按钮组合在一起,我们可以随时检查该组是否只有一个单选按钮被选。 要使用Button单选按钮,可以安装@polymer/paper-radio-button库,并在HTML文件引入相应的代码。然后可以按照库的使用说明,创建和配置Button单选按钮。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [button模拟实现单选效果](https://blog.csdn.net/changchang_/article/details/120262938)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [paper-radio-button:材质设计单选按钮](https://download.csdn.net/download/weixin_42099858/18456151)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值