从 Javascript 中的单选按钮记录选定的值
[英]Log the selected value from radio button in Javascript
问题描述
I'm trying to create a dropdown list with radio buttons where you can select several different styles for the web page.
我正在尝试创建一个带有单选按钮的下拉列表，您可以在其中为网页选择几种不同的样式。
I first want to try to console.log whenever I select a different color.每当我选择不同的颜色时，我首先想尝试console.log 。 Every time I select a different color, it still logs the color black.每次我选择不同的颜色时，它仍然记录黑色。
This is my html code:这是我的 html 代码：
<form>
<label><input type="radio" name="styleColor" id="black" checked="checked" onclick="styleChange()"/>Black</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" id="red" onclick="styleChange()">Red</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" id="green" onclick="styleChange()">Green</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" id="blue" onclick="styleChange()">Blue</label>
</form>
And my Javascript code:还有我的 Javascript 代码：
function styleChange() {
if (document.getElementById("black").selected = true) {
console.log("Color selected: Black")
}
else if (document.getElementById("red").selected = true) {
console.log("Color selected: Red")
}
else if (document.getElementById("green").selected = true) {
console.log("Color selected: Green")
}
else if (document.getElementById("blue").selected = true) {
console.log("Color selected: Blue")
}
}
3 个解决方案
解决方案1
1 2020-09-23 10:57:13
You could add onChange event listener to every radio button and call a method whenever the onChange event occurs.您可以向每个单选按钮添加 onChange 事件侦听器，并在 onChange 事件发生时调用一个方法。
document.querySelectorAll("input").forEach(item => { item.addEventListener("change", () => { console.log(item.id) }) })
<form> <label><input type="radio" name="styleColor" id="black" checked="checked"/>Black</label> <div class="dropdown-divider"></div> <label><input type="radio" name="styleColor" id="red">Red</label> <div class="dropdown-divider"></div> <label><input type="radio" name="styleColor" id="green">Green</label> <div class="dropdown-divider"></div> <label><input type="radio" name="styleColor" id="blue">Blue</label> </form>
解决方案2
1 已采纳 2020-09-23 11:13:39
Just change selected to checked and don't use single equal in if condition, it should be double equal.只需将 selected 更改为已选中，并且在 if 条件下不要使用单等号，它应该是双等号。 code below.下面的代码。
function styleChange() {
if (document.getElementById("black").checked) {
console.log("Color selected: Black")
}
else if (document.getElementById("red").checked) {
console.log("Color selected: Red")
}
else if (document.getElementById("green").checked) {
console.log("Color selected: Green")
}
else if (document.getElementById("blue").checked) {
console.log("Color selected: Blue")
}
}
demo https://jsbin.com/giberegora/edit?html,js,console,output演示https://jsbin.com/giberegora/edit?html,js,console,output
解决方案3
0 2020-09-23 11:43:49
I strongly recommend you use jquery it easy to use and more productive as compared to javascript code and one more thing I change "id" to "value" for checking which radio button is selected please check the below code.我强烈建议您使用 jquery，它与 javascript 代码相比易于使用且效率更高，另外一件事我将“id”更改为“value”以检查选择了哪个单选按钮，请检查以下代码。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<form>
<label><input type="radio" name="styleColor" value="black" onclick="styleChange()"/>Black</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" value="red" onclick="styleChange()">Red</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" value="green" onclick="styleChange()">Green</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" value="blue" onclick="styleChange()">Blue</label>
</form>
</body>
<script>
function styleChange(){
alert($("input[name='styleColor']:checked").val());
}
</script>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.