Question

我有这个HTML：

 <p class="form-row " id="radio_xsdfYxsfWEx_field">
           <label>Radio</label>
           <label for="radio_xsdfYxsfWEx_Male" class="radio">
                <input type="radio" class="input-radio um-field" value="Male" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Male">Male</label>
           <label for="radio_xsdfYxsfWEx_Female" class="radio">
                <input type="radio" class="input-radio um-field" value="Female" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Female">Female</label>
    </p>

我需要知道所选择的值是男性还是女性。我可以做到这一点但是这样但是id是不同的

    jQuery("#radio_xsdfYxsfWEx_field").on('change', function(){
       var value = this.value;
       if( value === 'Female' ) { 
        alert('succcess');
     }
   });

如果我能通过名字获得价值，那就更简单了：

jQuery("radio_xsdfYxsfWEx").on('change', function(){
       var value = this.value;
       if( value === 'Female' ) { 
        alert('succcess');
     }
   });

但是，两者都失败了，什么是合适的方式？谢谢！

Answer 1

您可以使用以下方法获取cheked无线电输入值： $("input[name='radio_xsdfYxsfWEx']:checked").val();

Answer 2

在.val()活动期间获取该群组的change（值）。

＆＃13;

$("input[name='radio_xsdfYxsfWEx']").on("change", function(){
  let val = $(this).val(); // Get the value of the group
  
  // Do what you want with the value
  console.log(val);
  if(val === "Female") {
    alert("Success!");
  } else {
    alert("Failure");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="form-row " id="radio_xsdfYxsfWEx_field">
  <label for="radio_xsdfYxsfWEx_Male" class="radio">
  <input type="radio" class="input-radio um-field" value="Male" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Male">Male</label>
  <label for="radio_xsdfYxsfWEx_Female" class="radio">
  <input type="radio" class="input-radio um-field" value="Female" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Female">Female</label>
</p>

＆＃13;

Answer 3

这应该有效，你需要使用目标的值，示例接近你的代码

＆＃13;

jQuery("#radio_xsdfYxsfWEx_field").on('change', function(e){
       if( e.target.value === 'Female' ) { 
        alert('succcess');
     }
   });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="form-row " id="radio_xsdfYxsfWEx_field">
           <label>Radio</label>
           <label for="radio_xsdfYxsfWEx_Male" class="radio">
                <input type="radio" class="input-radio um-field" value="Male" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Male">Male</label>
           <label for="radio_xsdfYxsfWEx_Female" class="radio">
                <input type="radio" class="input-radio um-field" value="Female" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Female">Female</label>
    </p>

＆＃13;

Answer 4

属性选择器和:checked帮助：

[...document.querySelectorAll("input")].forEach(e => e.addEventListener("change", () =>
    console.log(document.querySelector("[name=radio_xsdfYxsfWEx]:checked").value)
));

 <p class="form-row " id="radio_xsdfYxsfWEx_field">
       <label>Radio</label>
       <label for="radio_xsdfYxsfWEx_Male" class="radio">
            <input type="radio" class="input-radio um-field" value="Male" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Male">Male</label>
       <label for="radio_xsdfYxsfWEx_Female" class="radio">
            <input type="radio" class="input-radio um-field" value="Female" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Female">Female</label>
</p>

_{（此外，我相信永远不应该使用jQuery。）}

我如何知道选择了哪个值

4 个答案: