Javascript 如何将div的单选按钮设置为隐藏

我正在制作一份简单的反馈表，其中有三个字段：名称、评分（差、一般、好）和反馈意见

在我的表格中，我希望用户一次选择一个评分，并提交带有所选评分和反馈意见的表格。
我已经为每个等级创建了

元素，并将它们作为无线电类型。
我不想在表单上显示单选按钮，但我想让我的Div表现为单选按钮

还有如何修复div的边界？
我附上截图

第一个是我希望它如何显示，第二个是我当前的代码如何显示在UI上

下面是我的表单代码&CSS

<div id="modal_wrapper">
  <div id="modal_window">

    <div style="text-align: right;"><a id="modal_close" href="#">close   <b>X</b></a></div>

    <p><Strong>We'd love your feedback.</Strong><br></p>

    <p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>

    <form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
      Your Name :<br>
      <input type="text" name="name" value=""><span></span><br>
      <div class="feedbackCl" >
        <input id="overall_0" name="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l">
        <label for="overall_0" class="labelClass">— —</label>
        <span class="screen_reader" id="o1-l">Poor</span>
      </div>
      <div class="feedbackCl">
        <input id="overall_1" name="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l">
        <label for="overall_1" class="labelClass">—</label>
        <span class="screen_reader" id="o2-l">Fair</span>
      </div>
      <div class="feedbackCl">
        <input id="overall_2" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
        <label for="overall_2" class="labelClass">+ —</label>
        <span class="screen_reader" id="o3-l">Good</span>
      </div>
      <br>
      <span><br></span><br>
      <textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
      </textarea><br>
      <span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br> 
      <input type="submit" name="feedbackForm" value="Submit">
    </form>

  </div> 
</div>

---

您可以向每个div添加onClick事件，以填充隐藏的输入，而不是使用单选按钮

<input type="text" name="name" value=""><span></span><br>

<div class="feedbackCl" onclick="setRating(1)">
  <label for="overall_0" class="labelClass">- -</label>
  <span class="screen_reader" id="o1-l">Poor</span>
</div>

<div class="feedbackCl" onclick="setRating(2)">
  <label for="overall_1" class="labelClass">-</label>
  <span class="screen_reader" id="o2-l">Fair</span>
</div>

- -
贫穷的
-
公平的

Javascript

<script>
  function setRating(v) {
    document.getElementById('overall').value = v;
  }
</script>

功能设置额定值（v）{
document.getElementById（'total'）。value=v；
}

我认为您希望使用无线电输入，因为您不知道如何在提交时只获取一个表单字段进行跟踪

在这里，我使用一个隐藏的输入字段来存储选择了哪个div（poor-fair-good）

而且div很容易按照您的需要进行风格设计。
;)

$（.feedbackCl”）。在（“单击”，函数（）{
$（“.feedbackCl”）.removeClass（“selected”）.css（{“opacity”：1}）；；
$（此）.addClass（“选定”）；
$（“.feedbackCl”）.not（“.selected”）.css（{“opacity”：0.6}）；
log（“存储在表单的隐藏输入中的值：”+$（this.attr（“id”））；
$（“#feedbackResult”）.val（$（this.index（））；
});
.feedbackCl{
浮动：左；
框大小：边框框；
垫面：5px；
宽度：9%；
文本对齐：居中；
高度：40px；
边框：1px纯灰；
显示：块；
}
.反馈选择{
边框：2件纯蓝；
}
#可怜的{
背景色：红色；
}
#公平的{
背景颜色：黄色；
}
#好{
背景颜色：绿色；
}

我们希望得到您的反馈。

您的反馈将帮助我们改善您的体验。为保护您的隐私，请不要输入个人或帐户信息

您的姓名：





贫穷的
公平的
好








剩余1000个字符





您可以执行以下操作：


$（'.radio group.feedbackCl'）。单击（函数（）{
$（this.parent（）.find（'.feedbackCl'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
var val=$（this.attr（'data-value'）；
$（this.parent（）.find（'input'）.val（val）；
console.log（'您已选择：'+val）；
});
.feedbackCl{
显示：内联块；
宽度：70px；
高度：30px；
边框：2件纯色浅蓝色；
光标：指针；
边际：2px0；
文本对齐：居中；
线高：30px；
}
.无线电组{
位置：相对位置；
}
.反馈选择{
边框颜色：蓝色；
背景颜色：橙色；
}
跨度{
显示：块；
}

我们希望得到您的反馈。

您的反馈将帮助我们改善您的体验。为保护您的隐私，请不要输入个人或帐户信息

您的姓名：



— —
贫穷的
-
公平的
+ —
好
+
很好







剩余1000个字符

试试我的代码片段！我不使用任何js代码，只使用html和css！希望这能帮助你


.feedback{float:left；width:100%；margin top:10px}
.feedbackCl{float:左；宽度：15%}
.feedbackCl>input[type=“radio”]{display:none}
.feedbackCl>input[type=“radio”]：选中+标签>.sight{边框：实心2px#00f；背景：橙色}
.feedbackCl>标签{宽度：100%；高度：100%；显示：内联块；文本对齐：中心}
.feedbackCl>label>.sight{width:100%；float:left；边框：实心1px#ccc；填充：10px 0；颜色：#00f；左边距：1px}
.feedbackCl>label>.screen\u reader{宽度：100%；浮动：左侧；填充顶部：10px}

JS-Bin
我们希望得到您的反馈。

您的反馈将帮助我们改善您的体验。为保护您的隐私，请不要输入个人或帐户信息

您的姓名：



— —
贫穷的
—
公平的
+—
好
+
很好







剩余1000个字符

“我不想在表单上显示单选按钮，但我想让我的Div作为单选按钮”。你这是什么意思？单选按钮“行为”的一部分是用户可以选择一个选项，而且只能选择一个选项。如果不显示它，就不可能让它像单选按钮一样“运行”。如果我理解正确，您需要在按钮上使用
display:none
，并使用JavaScript将div连接到等效的单选按钮选项。再说一次，如果要隐藏单选按钮，为什么需要单选按钮？如果不需要单选按钮，只需使用图像单击事件来记录评级。是否希望获得类似单选按钮的div显示帮助css？（1个分区同时出现，其他分区将消失）谢谢分享。这个解决方案对我也有效。我很高兴！：）
<script>
  function setRating(v) {
    document.getElementById('overall').value = v;
  }
</script>