在Javascript中记录单选按钮中的选定值_Javascript_Html_Css

在Javascript中记录单选按钮中的选定值

javascript html css

在Javascript中记录单选按钮中的选定值,javascript,html,css,Javascript,Html,Css,我正在尝试创建一个带有单选按钮的下拉列表，您可以在其中为网页选择几种不同的样式每当我选择不同的颜色时，我首先要尝试console.log。每次我选择不同的颜色，它仍然记录黑色这是我的html代码： <form> <label><input type="radio" name="styleColor" id="black" checked="checked" onclick="

我正在尝试创建一个带有单选按钮的下拉列表，您可以在其中为网页选择几种不同的样式

每当我选择不同的颜色时，我首先要尝试

console.log

。每次我选择不同的颜色，它仍然记录黑色

这是我的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>

您可以将onChange事件侦听器添加到每个单选按钮，并在onChange事件发生时调用一个方法

document.querySelectorAll（“输入”）.forEach（项=>{
item.addEventListener（“更改”，（）=>{
console.log（item.id）
})
})


黑色
红色
绿色
蓝色

只需将“选择”更改为“选中”，在“如果条件”中不使用“单相等”，它应为“双相等”。代码如下

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")
   }
}

演示

我强烈建议您使用jquery。与javascript代码相比，jquery易于使用且效率更高。还有一件事我将“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>


黑色
红色
绿色
蓝色
函数styleChange（）{
警报（$（$（输入[name='styleColor']：选中”）.val（）；
}

只要您使用

onclick

您就可以使用

onclick=“styleChange（'red

）”（例如）。并使用

进行比较，而不是

（作业）。谢谢，我以为我已经试过了，但我一定犯了一个小错误。jsbin也非常有用！感谢您花时间回答！如果我只记录颜色，我会用这个。但由于我想设计某些ID，我想我不能使用你的。谢谢你的评论！我通常会使用jquery，但因为我在使用ASP.NET MVC，我真的不知道如何使用jquery，因为它不是一个公共网站，我只会使用一些小的javascript，我真的没有想过使用jquery。它非常简单，可以提高应用程序的性能，但是第一次可能需要一些时间，但从长远来看，它会给您带来很多好处

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