如何根据单选类型输入设置标签的文本？答案

【问题标题】：How to set text of a label according radio type input?如何根据单选类型输入设置标签的文本？
【发布时间】：2018-04-24 22:25:35
【问题描述】：

JS 代码

          <script>
    handleClick = function(val) {
          document.getElementById('selectnumber').innerHTML = val;
      };
</script>

HTML 代码

 <ul><li><fieldset class="rating">
    <legend>Please rate:</legend>
    <input type="radio" id="star5" onclick="handleClick('star5')" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
<input type="radio" id="star4"  onclick="handleClick('star4')" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
<input type="radio" id="star3"  onclick="handleClick('star3')" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
<input type="radio" id="star2"  onclick="handleClick('star2')"name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
<input type="radio" id="star1"  onclick="handleClick('star1')" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>
                <asp:Button ID="Rating_btn" runat="server" Text="Rate" OnClick="Rating_btn_Click"/>
<br /><asp:Label ID="selectnumber" runat="server" Text=""></asp:Label>

css代码

.rating {float:left;}
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0); }

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5); }

.rating:not(:checked) > label:before {content: '★ ';}

.rating > input:checked ~ label {
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px; }

我正在尝试获取星标的值并将其显示在我的屏幕上。不幸的是，它没有这样做。

【问题讨论】：

您的openNav 和closeNav 对这个问题没有任何价值。但是既然你发了，我建议不要用 JS 设置样式，而是添加和删除 css 类
您设置的内容只会评估在初始页面加载时选择的内容，从您当前显示的内容来看，这将一事无成，因为没有收音机是 selected。这就是为什么我建议使用onClick。
请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。
为什么要添加css？
windows.handleclick 不起作用

标签： javascript html asp.net input

【解决方案1】：

这可能是最直接的方法。

（是的，还有其他方法，是的，还有更好的方法，但如果您不熟悉使用 JS 获取/设置值，这将尽可能简单直接）。

HTML

<fieldset class="rating">
    <legend>Please rate:</legend>
    <input type="radio" id="star5" onclick="handleClick('star5')" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4"  onclick="handleClick('star4')" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3"  onclick="handleClick('star3')" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2"  onclick="handleClick('star2')"name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1"  onclick="handleClick('star1')" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>

<label id="selectnumber" runat="server" Text=""></label>

function handleClick(val) {
  document.getElementById('selectnumber').innerHTML = val;
};

JSFiddle

https://jsfiddle.net/2Lfthm25/1/

Example.html

<html>
<fieldset class="rating">
<legend>Please rate:</legend>
    <input type="radio" id="star5" onclick="handleClick('star5')" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4"  onclick="handleClick('star4')" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3"  onclick="handleClick('star3')" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2"  onclick="handleClick('star2')"name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1"  onclick="handleClick('star1')" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>

<label id="selectnumber" runat="server" Text=""></label>
<script>
    function handleClick(val) {
          document.getElementById('selectnumber').innerHTML = val;
      };
</script>
</html>

【讨论】：

试过没有用，可能是因为我没有在我的 html 代码中调用该函数，我该怎么做？
在函数中抛出 debugger 或 alert 看看它是否被命中
我该怎么做 srry 它不是我的强域
我该怎么做？
LOL...如果它不起作用是因为你不知道如何复制和粘贴