我怎么知道选择哪个值

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

您可以使用以下命令获取经过检查的单选输入值： $("input[name='radio_xsdfYxsfWEx']:checked").val();

Answer 2

只需在change事件期间获取组的.val() （值）即可。

 $("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"); } }); 

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

Answer 3

应该可以，您需要使用target的值，该示例接近您的代码

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

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

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。）}