获取所选单选按钮的值

Question

我有这个表格，我需要知道选择了哪个单选按钮。 这是我的 html 代码.请注意，我已经阅读了许多其他字段，例如电话等以减少代码。

<form onsubmit="myFunction()" id="myForm" >
<div class="row">
<div class="col-md-12  contact-form pt-3">
<div class="sign-up">
<h4>SIGN UP</h4>
</div>
<h1>web</h1>
<div class="form-group">
<input class="form-control" id="uniqueID" name="name" required  formcontrolname="" placeholder="Full Name" type="name" >
</div>
<div class="form-group d-flex pt-3">
<div class="custom-control custom-radio pr-3">
<input type="radio" id="customRadio1" name="customRadio" value="male" class="custom-control-input">
<label class="custom-control-label" for="customRadio1" >Male</label>
</div> 
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" value="female" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Female</label>
</div>
</div>
<div class="pt-4 text-left">
<button type="submit" class="access-btn">Access Offers</button>
</div>
</form>

这是 JavaScript 代码 获取形式的值 .我可以很容易地提取其他值，但不能提取性别值。

function myFunction(){
event.preventDefault()
name= document.getElementById("myForm").elements[0].value;
phone= document.getElementById("myForm").elements[1].value;
gender=document.getElementById("myForm").elements[7].value; //this does not give any correct output
debugger;
}

Answer 1

你应该像下面这样给出

var gender = document.querySelector('input[name = "customRadio"]:checked').value;

Answer 2

会是这样的吗？

function myFunction(){

var getName = $('input[name="name"]').val();
var getRadio = $("#myForm").find('input[type="radio"]:checked').val();

$('#result').html('Your name: '+getName+'<br>Genre: '+getRadio);

event.preventDefault();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm" onsubmit="myFunction()">
<div class="row">
<div class="col-md-12  contact-form pt-3">
<div class="sign-up">
<h4>SIGN UP</h4>
</div>
<h1>web</h1>
<div class="form-group"><input id="uniqueID" class="form-control" name="name" required="" type="name" placeholder="Full Name" /></div>
<div class="form-group d-flex pt-3">
<div class="custom-control custom-radio pr-3"><input id="customRadio1" class="custom-control-input" name="customRadio" type="radio" value="male" /> <label class="custom-control-label" for="customRadio1">Male</label></div>
<div class="custom-control custom-radio"><input id="customRadio2" class="custom-control-input" name="customRadio" type="radio" value="female" /> <label class="custom-control-label" for="customRadio2">Female</label></div>
</div>
<div class="pt-4 text-left"><button class="access-btn" type="submit">Access Offers</button></div>
</div>
</div>
</form>
<div id="result"></div>

Answer 3

让我用这个答案来解释一下

jQuery("input#customRadio1:checked").length;
jQuery("input#customRadio2:checked").length;

我在这里要做的是过滤我的文档的所有元素，这些元素是输入元素JQuery("input，然后按 id 选择我的单选按钮，它应该是唯一的#customRadio2，最后我过滤它是否被选中:checked").

因为 de id 是唯一的，所以长度可以是 0 或 1，如果它是 1，是因为被选中，如果不是，是因为它不是。