Sicherstellen, dass alle Optionsfelder auf einer Seite geprüft werden.

Question

Ich habe eine Seite mit vielen Radioknöpfen darunter. Es ist Pflicht für meine Benutzer eins in jeder Zeile zu überprüfen. Ich bin auf der Suche nach einem Weg, wo auf einen Klick auf meine Schaltfläche Speichern Ich überprüfe alle Radio-Buttons und stellen Sie sicher, dass sie mit begrenzten Javascript oder Jquery-Code überprüft werden.

Wie kann ich das erreichen?

  <div id="HealthCheck1">   
       <div id="HCBudget"> 
        <label for="budgethealth">Budget Health</label> 
        <span class="radiored"><input type="radio" id="bhred" name="budgethealth" value="red" @(Model.BudgetHealth == "3" ? "checked='checked'" : "")></input></span> 
        <span class="radioyellow"><input type="radio" id="bhyellow" name="budgethealth" value="yellow" @(Model.BudgetHealth == "2" ? "checked='checked'" : "")></input></span> 
        <span class="radiogreen"><input type="radio" id="bhgreen" name="budgethealth" value="green" @(Model.BudgetHealth == "1" ? "checked='checked'" : "")></input></span> 
       </div> 
       <hr> 
       <div id="HCTeam"> 
        <label for="teamhealth">Team Health</label> 
        <span class="radiored"><input type="radio" id="thred" name="teamhealth" value="red" @(Model.TeamHealth == "3" ? "checked='checked'" : "")></input></span> 
        <span class="radioyellow"><input type="radio" id="thyellow" name="teamhealth" value="yellow" @(Model.TeamHealth == "2" ? "checked='checked'" : "")></input></span> 
        <span class="radiogreen"><input type="radio" id="thgreen" name="teamhealth" value="green" @(Model.TeamHealth == "1" ? "checked='checked'" : "")></input></span> 
       </div> 
       <hr> 
       <div id="HCRisk"> 
        <label for="riskhealth">Risk Health</label> 
        <span class="radiored"><input type="radio" id="rhred" name="riskhealth" value="red" @(Model.RiskHealth == "3" ? "checked='checked'" : "")></input></span> 
        <span class="radioyellow"><input type="radio" id="rhyellow" name="riskhealth" value="yellow" @(Model.RiskHealth == "2" ? "checked='checked'" : "")></input></span> 
        <span class="radiogreen"><input type="radio" id="rhgreen" name="riskhealth" value="green" @(Model.RiskHealth == "1" ? "checked='checked'" : "")></input></span> 
       </div> 
      </div>  
      <div id="ProgHealthStat" class="btnholder"> 
       <button id="Save" class="sendbtn">Save Changes</button> 
      </div> 

Ich versuchte diese Codezeile, aber kein Glück. Ich erhielt die Warnung, obwohl die Radioknöpfe alle überprüft worden waren.

  $('div.HealthCheck1:not(:has(:radio:checked))') 

Answer 1

Geben Sie jeden div, die Radio-Buttons in eine Klasseneigenschaft (z class="foo") hat. Dann können Sie tun:

$(document).ready(function() { 
 
    $('#Save').on('click', function() { 
 
    if ($('.foo:not(:has(:radio:checked))').length) { 
 
     alert('Please finish filling out the form'); 
 
    } 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="HealthCheck1"> 
 
    <div id="HCBudget" class="foo"> 
 
     <label for="budgethealth"> 
 
      Budget Health 
 
     </label> 
 
     <span class="radiored"> 
 
      <input id="bhred" name="budgethealth" type="radio" value="red"/> 
 
     </span> 
 
     <span class="radioyellow"> 
 
      <input id="bhyellow" name="budgethealth" type="radio" value="yellow"/> 
 
     </span> 
 
     <span class="radiogreen"> 
 
      <input id="bhgreen" name="budgethealth" type="radio" value="green"/> 
 
     </span> 
 
    </div> 
 
    <hr> 
 
    <div id="HCTeam" class="foo"> 
 
     <label for="teamhealth"> 
 
      Team Health 
 
     </label> 
 
     <span class="radiored"> 
 
      <input id="thred" name="teamhealth" type="radio" value="red"/> 
 
     </span> 
 
     <span class="radioyellow"> 
 
      <input id="thyellow" name="teamhealth" type="radio" value="yellow"/> 
 
     </span> 
 
     <span class="radiogreen"> 
 
      <input id="thgreen" name="teamhealth" type="radio" value="green"/> 
 
     </span> 
 
    </div> 
 
    <hr> 
 
    <div id="HCRisk" class="foo"> 
 
     <label for="riskhealth"> 
 
      Risk Health 
 
     </label> 
 
     <span class="radiored"> 
 
      <input id="rhred" name="riskhealth" type="radio" value="red"/> 
 
     </span> 
 
     <span class="radioyellow"> 
 
      <input id="rhyellow" name="riskhealth" type="radio" value="yellow"/> 
 
     </span> 
 
     <span class="radiogreen"> 
 
      <input id="rhgreen" name="riskhealth" type="radio" value="green"/> 
 
     </span> 
 
    </div> 
 
    </hr> 
 
    </hr> 
 
</div> 
 
<div class="btnholder" id="ProgHealthStat"> 
 
    <button class="sendbtn" id="Save"> 
 
     Save Changes 
 
    </button> 
 
</div>