html 类似于单选按钮的效果

最新推荐文章于 2023-10-23 11:47:39 发布

quwei7515

最新推荐文章于 2023-10-23 11:47:39 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： html class button action function input

本文链接：https://blog.youkuaiyun.com/quwei7515/article/details/7972075

版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单标签切换效果示例。通过点击不同的标签，可以更改背景颜色并更新输入框中的值。此外，还提供了一个按钮用于显示当前选中的标签值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>