Get alert, if radio button in group of options is not checked?

Question

I have placed radio button inside foreach loop based on records radio button will be shown with options yes or no ,so lets say two records so number of radio buttons with options yes or no will be 4

for record1 then rule no 1 from table //

<input type="radio" id="1" class="terms_"/>Yes
<input type="radio" id="2" class="terms_"/>No  

for record 2  then  rule no 2 from table//

<input type="radio" id="3" class="terms_"/>Yes
<input type="radio" id="4" class="terms_"/>No 

<input type="submit" class="validate" value="Submit"/>

so what if I don't select any option yes or no from rule 1 then show alert select (yes /no), again if I don't select any option for rule alert should come please select (yes/no) from rule 2,but in my code I am getting 4 times alert but I want two alerts to show because options are two only.

 $(".validate").click(function() {
    $('.terms_').each(function() {
       if (!$(".terms_:checked").val()) {
          alert('Oops,Please select yes or no.');
       }
    });
 });

Use the `length` property: `if ($(".terms_:checked").length === 0) ` — Rory McCrossan, Mar 14 '19 at 12:04
@Rory McCrossan this also woking ,I am getting 4 alert but I want two alert either yes or no based on different options from table records — Anonymous, Mar 14 '19 at 12:06
In that case you need to put a containing element around each group of radios and loop over that, selecting only the radio elements within the container — Rory McCrossan, Mar 14 '19 at 12:06

Mamun · Accepted Answer · 2019-03-14T13:44:06.163

You can add name attribute to the radio buttons to make group for them, then check the length to show the message:

$(".validate").click(function(){
  var len = $('[name=rule1]:checked, [name=rule2]:checked').length;
  if (len <= 1)  {
    alert('Oops,Please select yes or no.'); 
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <div>
    <label>Rule 1</label>
    <input type="radio" id="1" name="rule1" class="terms_"/>Yes
    <input type="radio" id="2" name="rule1" class="terms_"/>No 
  </div>
  <div>
    <label>Rule 2</label>
    <input type="radio" id="3" name="rule2" class="terms_"/>Yes
    <input type="radio" id="4" name="rule2" class="terms_"/>No 
  </div>

  <input type="submit" class="validate" value="Submit"/>
</form>

Get alert, if radio button in group of options is not checked?

1 Answers1