ラジオボタンをdivのために隠して設定する方法

Question

私は3つのフィールド名、評価（悪い、良い、良い）とフィードバックコメントがある単純なフィードバックフォームに取り組んでいます。

私のフォームでは、一度に1つのレーティングを選択して、選択したレーティング&フィードバックコメントをフォームに送信します。
私はそれぞれの評価について<div>の要素を作成し、ラジオタイプにしました。
ラジオボタンをフォームに表示したくないのですが、Divをラジオボタンとして動作させたいと思います。

Divsのボーダーを修正する方法もありますか？
スクリーンショットを添付しています。

最初に、私はそれを表示したい、もう1つは現在のコードがUIにどのように表示されるかです。以下は

は

<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

むしろラジオボタンを使用するよりも、あなたはそれぞれのdivにonClickイベントを追加することができます& CSS私のフォームのコードであります隠された入力が入力されます。

<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

私はあなたが提出に追跡するための唯一のフォームフィールドを取得するための別の方法を知らないので、ラジオの入力を使用したいと思います。

ここでは、div（poor - fair - good）が選択されていることを格納する隠し入力フィールドを使用します。

divは必要に応じて簡単にスタイルを設定できます。
;）

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