javascript - 单选按钮已选中jquery

Question

我在 Bootstrap 4 模态主体中的表单内有一系列单选按钮。我想看看检查了哪一个，这应该是一件非常简单的事情，但我今天很挣扎，不知道我做错了什么。

这是 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>

我已经尝试过:

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

还有:

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

唯一有效的是，如果我将其放入按钮单击中(但我不能这样做，因为我必须在执行提交按钮之前检查该值)。

Answer 1

您可以在单击按钮时检查选中的单选按钮的长度，如下所示:

$("#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"/>