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

Question

我正在制作简单的反馈表，其中有 3 个字段名称、评级(差、一般、好)和反馈评论。

在我的表单中，我希望用户一次选择一个评分，然后提交包含所选评分和反馈评论的表单。
我创建了 <div>每个评级的元素，并将它们作为 radio 类型。
我不想在表单上显示单选按钮，但我希​​望我的 Div 充当单选按钮。

还有如何修复Divs的边框？
我附上屏幕截图。

第一个，我希望它如何显示，第二个是我当前代码在 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>

CSS 代码

.feedbackCl {
  float: left;
  box-sizing: border-box;
  padding-top: 5px;
  width: 9%;
  text-align: center;
  height: 40px;
}

input[type="radio" i] {
  -webkit-appearance: radio;
  box-sizing: border-box;
}

.labelClass{
  margin-right: 0 !important;
  height: 28px;
  background-color: #fff !important;
  color: #0511ac;
  box-sizing: border-box;
}

Answer 1

您可以执行以下操作:

$('.radio-group .feedbackCl').click(function(){
    $(this).parent().find('.feedbackCl').removeClass('selected');
    $(this).addClass('selected');
    var val = $(this).attr('data-value');
    $(this).parent().find('input').val(val);
    console.log('You have selected: '+val);
});

.feedbackCl {
    display: inline-block;
    width: 70px;
    height: 30px;
    border: 2px solid lightblue;
    cursor: pointer;
    margin: 2px 0;
    text-align: center;
    line-height: 30px;
}

.radio-group{
    position: relative;
}

.feedbackCl.selected{
    border-color: blue;
    background-color: orange;
}
span{
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="radio-group">
      <div class="feedbackCl" data-value="1">— —
          <span>Poor</span>
      </div>
      <div class="feedbackCl" data-value="2">-
          <span>Fair</span>
      </div>
      <div class="feedbackCl" data-value="3">+ —
          <span>Good</span>
      </div>
      <div class="feedbackCl" data-value="4">+
          <span>Very good</span>
      </div>
   </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>
   </form>

   </div> 
</div>