Wie validiere ich Radiobuttons in jquery?

Question

Dies ist mein Code Ich möchte, dass, wenn ich das Formular einreichen und Radio-Button nicht überprüft hat, sollte das Radio Button Gliederung rot ändern. Wie ändert man den Umriss Farbe der Radio-Buttons?

$('#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'); 
    } 
}); 

bitte diese versuchen ....

Answer 2

Sie können nicht einfach die Farbe eines Funk Standardeinstellung ändern.

Aber Sie können ein benutzerdefiniertes Radio Skript wie verwenden: http://icheck.fronteed.com/

oder einfach die Farbe der Textbeschriftung ändern.

Answer 3

können Sie jQuery .closest()-Funktion verwenden.

Wir können CSS in HTML-Label nicht Radio-Button anwenden.

$('#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>

bitten Sie meine oben Schnipsel überprüfen?