单选按钮被选中的jQuery

Question

I have a series of radio buttons inside a form which is in the body of a bootstrap 4 modal. I'm trying to see which one is checked, which should be a very simple thing to do but I'm struggling with it today and don't know what I'm doing wrong.

here is the HTML.

<div class="card-body">
  <div class="custom-control custom-radio">
    <input type="radio" id="tdeeActivitySedentary" name="customRadioInline3" class="custom-control-input" value="1.2">
    <label class="custom-control-label" for="tdeeActivitySedentary">Sedentary (little or no exercise)</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="tdeeActivityLight" name="customRadioInline3" class="custom-control-input" value="1.375">
    <label class="custom-control-label" for="tdeeActivityLight">Light Activity (light exercise 1-3 days per week)</label>
  </div>
  <div class="custom-control custom-radio">
   <input type="radio" id="tdeeActivityMod" name="customRadioInline3" class="custom-control-input" value="1.55">
    <label class="custom-control-label" for="tdeeActivityMod">Moderately Activity (moderate exercise 3-5 days per week)</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="tdeeActivityHeavy" name="customRadioInline3" class="custom-control-input" value="1.725">
    <label class="custom-control-label" for="tdeeActivityHeavy">Very Active (hard exercise 5+ days per week)</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="tdeeActivityEx" name="customRadioInline3" class="custom-control-input" value="1.9">
    <label class="custom-control-label" for="tdeeActivityEx">Extremely Active (very hard exercise 6+ days per week)</label>
  </div>
</div>

I've tried:

for (var i = 0; i < 7; i++) {
  if ($("input[name='customRadioInline3']").is(':checked')) {
    alert("Checked")
  } 
}

And:

if ($("input[name='customRadioInline3']").is(':checked')) {
  alert("Checked")
} 

the only thing that works is if I put this inside a button click (but I can't do that because I have to check the value before the submit button is executed).

Answer 1

You can check the length of the checked radio button on button click like the following way:

 $("#btnClick").click(function(){ if($("input[name=customRadioInline3]:checked").length > 0){ alert("Checked"); } else{ alert("Not checked"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card-body"> <div class="custom-control custom-radio"> <input type="radio" id="tdeeActivitySedentary" name="customRadioInline3" class="custom-control-input" value="1.2" > <label class="custom-control-label" for="tdeeActivitySedentary">Sedentary (little or no exercise)</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="tdeeActivityLight" name="customRadioInline3" class="custom-control-input" value="1.375"> <label class="custom-control-label" for="tdeeActivityLight">Light Activity (light exercise 1-3 days per week)</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="tdeeActivityMod" name="customRadioInline3" class="custom-control-input" value="1.55"> <label class="custom-control-label" for="tdeeActivityMod">Moderately Activity (moderate exercise 3-5 days per week)</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="tdeeActivityHeavy" name="customRadioInline3" class="custom-control-input" value="1.725"> <label class="custom-control-label" for="tdeeActivityHeavy">Very Active (hard exercise 5+ days per week)</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="tdeeActivityEx" name="customRadioInline3" class="custom-control-input" value="1.9"> <label class="custom-control-label" for="tdeeActivityEx">Extremely Active (very hard exercise 6+ days per week)</label> </div> </div> <input type="button" id="btnClick" value="Click"/> 

Answer 2

Not sure what you want to achieve, but $("input[name='customRadioInline3']") will return all the inputs in an array so you have to iterate them.

var radios=$("input[name='customRadioInline3']");
for(var i =0; i < radios.length; i++ ) {
    if(radios[i].checked) {
        alert("Checked");
    } 
}

In case you only want the checked one:

$("input[name='customRadioInline3']:checked")

use val() to get the value:

$("input[name='customRadioInline3']:checked").val()