Question

我正在制作简单的反馈表单，其中我有3个字段名称，评级（差，公平，良好）和反馈评论。

在我的表单中，我希望用户一次选择一个评级并提交具有所选评级的表单。反馈意见我为每个评级创建了<div>个元素，并将它们作为无线电类型我不想在表单上显示单选按钮，但我希望我的Div表现为单选按钮。

另外如何修复Div的边界？
我附上截图。

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

以下是我的表格代码＆amp; 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

您可以执行以下操作：

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

UITextView *lblHelp = [[UITextView alloc]initWithFrame:CGRectMake(10, 10, self.view.frame.size.width - 20, self.view.frame.size.height - 20)];
[lblHelp setBackgroundColor:[UIColor clearColor]];
[lblHelp setEditable:NO];
[lblHelp setSelectable:NO];
lblHelp.showsVerticalScrollIndicator=NO;
lblHelp.showsHorizontalScrollIndicator=NO;
[self.view addSubview:lblHelp];

NSString *string = HELP_STATIC_CONTENT;
NSMutableAttributedString *attrString = [[NSMutableAttributedString alloc] initWithString:string];
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle defaultParagraphStyle] mutableCopy];
paragraphStyle.alignment=NSTextAlignmentJustified;
[paragraphStyle setLineSpacing:3]; 
[attrString beginEditing];
[attrString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:12] range:NSMakeRange(0, string.length)];
[attrString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, string.length)];

[attrString endEditing];
lblHelp.attributedText = attrString;

Answer 2

试试我的片段！我不使用任何js代码，只是html和CSS！希望这可以帮到你！

.feedback{float:left;width:100%;margin-top:10px}
.feedbackCl{float:left;width:15%}
.feedbackCl>input[type="radio"]{display:none}
.feedbackCl>input[type="radio"]:checked+label>.sight{border:solid 2px #00f;background:orange}
.feedbackCl>label{width:100%;height:100%;display:inline-block;text-align:center}
.feedbackCl>label>.sight{width:100%;float:left;border:solid 1px #ccc;padding:10px 0;color:#00f;margin-left:1px}
.feedbackCl>label>.screen_reader{width:100%;float:left;padding-top:10px}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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="feedback">
        <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">
          <span class="sight">— —</span>
          <span class="screen_reader" id="o1-l">Poor</span>
        </label>
      </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">
          <span class="sight">—</span>
          <span class="screen_reader" id="o2-l">Fair</span>
        </label>
        
      </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">
          <span class="sight">+—</span>
          <span class="screen_reader" id="o3-l">Good</span>
        </label>
      </div>
       <div class="feedbackCl">
        <input id="overall_3" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
        <label for="overall_3" class="labelClass">
          <span class="sight">+</span>
          <span class="screen_reader" id="o3-l">Very Good</span>
        </label>
      </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> 
      <input type="submit" name="feedbackForm" value="Submit">
    </form>

  </div> 
</div>
</body>
</html>

Answer 3

您可以向每个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>

Answer 4

我认为您希望使用收音机输入，因为您不知道另一种方式只能在提交时跟踪一个表单字段。

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

div很容易就像你想要的那样 ;）

＆＃13;

$(".feedbackCl").on("click",function(){
  $(".feedbackCl").removeClass("selected").css({"opacity":1});;
  $(this).addClass("selected");
  $(".feedbackCl").not(".selected").css({"opacity":0.6});
  
  
  console.log("Value stored in the hidden input of the form: "+$(this).attr("id"));
  $("#feedbackResult").val( $(this).index() );
});

＆＃13;

.feedbackCl {
  float: left;
  box-sizing: border-box;
  padding-top: 5px;
  width: 9%;
  text-align: center;
  height: 40px;
  border:1px solid grey;
  display:block;
}
.feedbackCl.selected{
  border:2px solid blue;
  
}

#poor{
  background-color:red;
}
#fair{
  background-color:yellow;
}
#good{
  background-color:green;
}

＆＃13;

<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>
      <br>
      <div class="feedbackCl" id="poor">
        Poor
      </div>
      <div class="feedbackCl" id="fair">
        Fair
      </div>
      <div class="feedbackCl" id="good">
        Good
      </div>
      <input type="hidden" id="feedbackResult" name="feedbackResult">
      <br>
      <br>
      <br>
      
      <textarea 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>
      <br>
      <input type="submit" name="feedbackForm" value="Submit">
    </form>
    <br>
  </div> 
</div>

＆＃13;

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

4 个答案: