gpt4 book ai didi

javascript - 使用JS获取Radiobutton的值

转载 作者:太空狗 更新时间:2023-10-29 15:39:53 25 4
gpt4 key购买 nike

问题:我无法获取单选按钮的值或文本框中的值。

通过反复试验,我发现以下内容使我可以访问 div gender1 中的信息

我不知道如何获取性别或年龄的值。我尝试附加 .value/.value()、使用 id 属性等。我还尝试了堆栈溢出相关问题中的各种方法 (Get Radio Button Value with Javascript),但收效甚微。

var checkedRadio = document.querySelectorAll('.w3-container')[0]
.querySelectorAll('#box')[0]
.querySelector('#gender1');

console.log( checkedRadio );
<body>
<div class="w3-container">
<div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;">
<h5><b>Age (years):</b></h5>
<div id="age">
<input type="number" name="age1">
<br>
</div>
<div id="gender1">
<h5><b>Male or Female?</b>:
<input type="radio" id="r1" name="gender" value="Male"> Male
<input type="radio" id="r2" name="gender" value="Female"> Female
</h5>
</div>
</div>
</div>
</body>

最佳答案

你可以使用

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

获取值。

document.getElementById("btn_click").addEventListener("click", function(){


if(document.querySelector('input[name="age1"]').value !== "" && document.querySelector('input[name="gender"]:checked') !== null )
{
console.log("Age : ", document.querySelector('input[name="age1"]').value);
console.log("Gender : ", document.querySelector('input[name="gender"]:checked').value);
}
else
{
console.log("Please provide all the details.")
}
});
<body>
<div class="w3-container">
<div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;">
<h5><b>Age (years):</b></h5>
<div id="age">
<input type="number" name="age1">
<br>
</div>
<div id="gender1">
<h5><b>Male or Female?</b>:
<input type="radio" id="r1" name="gender" value="Male" > Male
<input type="radio" id="r2" name="gender" value="Female"> Female
</h5>
</div>
<input type="button" id="btn_click" value="Click">
</div>
</div>
</body>

关于javascript - 使用JS获取Radiobutton的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41919262/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com