如何设置单选按钮隐藏在div

Question

我简单的反馈表上的工作，我有3个字段名称，等级（差，一般，好）和反馈意见。

在我的形式我想用户选择一个等级的时间和与选定的评级&反馈意见提交表单。
我已经为每个评级创建了<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> 

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>

Answer 2

而不是使用单选按钮，您可以onClick事件添加到每个DIV哪些将填充隐藏的输入。

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

我想你想使用的无线电投入，因为你不知道另一种方式来获得只有一个表单字段来跟踪提交。

在这里，我使用了一个隐藏的输入字段来存储其格（差 - 公平 - 好）已被选定。像你想

而且申报单是很容易的风格。
;）

$(".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()); 
 
});

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

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

Answer 4

试试我的片段！我不使用任何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>