jqueryのラジオボタンを検証する方法は？

Question

これは私のコードです。フォームを送信するとラジオボタンがチェックされていないと、ラジオボタンのアウトラインが赤に変わります。アウトラインを変更するには ラジオボタンの色は？

$('#btn').click(function() { 
 
    if ($('input[name=gender]:checked').length <= 0) { 
 
     $("#bordergen").css('border-color', 'red'); 
 
    } 
 
    else { 
 
     $("#bordergen").css('border-color', '#ccc'); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
     <label class="col-md-3 col-sm-3 col-xs-12 control-label">Gender<span class="required">*</span></label> 
 
     <div class="col-md-9 col-sm-9 col-xs-12"> 
 
      <div class="radio"> 
 
       <label> 
 
        <input id="bordergen" type="radio" class="flat" required='required' value="Man" name="gender"> 
 
        Man 
 
       </label> 
 
      </div> 
 
      <div class="radio"> 
 
       <label> 
 
        <input id="bordergen" type="radio" class="flat" required='required' value="Women" name="gender"> 
 
        Woman 
 
       </label> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3"> 
 
      <input type='submit' id="btn" name='btn' value='Submit' class="btn btn-success" /> 
 
     </div> 
 
    </div>

Answer 1

$('#btn').click(function() { 
    if ($('input[name=gender]:checked').length <= 0) {   
     $("#bordergen").css('outline', '1px solid red'); 
    } 
    else {   
     $("#bordergen").css('outline', '1px solid #ccc'); 
    } 
}); 

Answer 2

あなたは簡単にデフォルトのラジオの色を変更することはできません。

しかし、あなたは次のようにカスタムラジオスクリプトを使用することができます。http://icheck.fronteed.com/

または単にテキストラベルの色を変更します。

Answer 3

あなたはjQueryの.closest()機能を使用することができます....これを試してみてください。

HTMLラベルではなく、ラジオボタンでCSSを適用できます。

$('#btn').click(function() { 
 
    if ($('input[name=gender]:checked').length <= 0) {  
 
     $('input[name=gender]').css('outline', '1px solid red'); 
 
    } 
 
    else {   
 
     $('input[name=gender]').css('outline', 'none'); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
     <label class="col-md-3 col-sm-3 col-xs-12 control-label">Gender<span class="required">*</span></label> 
 
     <div class="col-md-9 col-sm-9 col-xs-12"> 
 
      <div class="radio"> 
 
       <label> 
 
        <input type="radio" class="flat" required='required' value="Man" name="gender"> 
 
        Man 
 
       </label> 
 
      </div> 
 
      <div class="radio"> 
 
       <label> 
 
        <input type="radio" class="flat" required='required' value="Women" name="gender"> 
 
        Woman 
 
       </label> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3"> 
 
      <input type='submit' id="btn" name='btn' value='Submit' class="btn btn-success" /> 
 
     </div> 
 
    </div>

あなたは私の上記のスニペットを確認していただけますか？