Question

我有一组单选按钮和一个提交按钮。当我单击提交按钮时，会显示一条消息，告诉我单击了哪个单选按钮。我现在要做的是更改所选单选按钮的颜色，我该怎么做？我尝试了很多事情，但没有成功。这是代码

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
    }
  }
}

<input type="radio" name="gender" class="one" value="Male" />Male <br>
<input type="radio" name="gender" class="one" value="Female" />Female<br>
<input type="radio" name="gender" class="one" value="Other" />Other<br>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>

Answer 1

您可以将单选按钮包装到div，然后在选定时应用CSS类。然后，在CSS中，您可以定义必要的样式。

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      optionContainer[i].parentElement.classList.add('selected');
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
    } else {
      optionContainer[i].parentElement.classList.remove('selected');
    }
  }
}

.selected {
  color: Red;
}

<div>
  <input type="radio" name="gender" class="one" value="Male" />Male
</div>
<div>
  <input type="radio" name="gender" class="one" value="Female" />Female
</div>
<div>
  <input type="radio" name="gender" class="one" value="Other" />Other
</div>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>

Answer 2

您可以根据需要自定义单选按钮的样式。在收音机上直接样式无法正常工作。

下面是一个例子。

您还没有提供selected类的样式。请添加它以查看样式更改。

这是您需要的样式。

.container.selected  input:checked ~ .checkmark {
  background-color: red;
}

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      optionContainer[i].parentElement.classList.add("selected");
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
    } else {
      optionContainer[i].parentElement.classList.remove("selected");
    }
  }
}

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196f3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.container.selected  input:checked ~ .checkmark {
  background-color: red;
}

<h1>Custom Radio Buttons</h1>
<label class="container"
  >One
  <input type="radio" class="one" checked="checked" name="radio" value="One" />
  <span class="checkmark"></span>
</label>
<label class="container"
  >Two
  <input type="radio" class="one" name="radio" value="Two" />
  <span class="checkmark"></span>
</label>
<label class="container"
  >Three
  <input type="radio" name="radio" class="one" value="Three" />
  <span class="checkmark"></span>
</label>
<label class="container"
  >Four
  <input type="radio" class="one" name="radio" value="Four" />
  <span class="checkmark"></span>
</label>

<div id="display"></div>
<button onclick="selectedButton()">Submit</button>

Answer 3

您可以将整个输入元素括在一个范围内，并使用parentNode更改整个单选按钮的颜色

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
      optionContainer[i].style.backgroundColor = "blue";
      optionContainer[i].parentNode.style.backgroundColor = "blue";
      optionContainer[i].parentNode.style.color = "yellow"
    } else {
      optionContainer[i].style.backgroundColor = "";
      optionContainer[i].parentNode.style.backgroundColor = "";
      optionContainer[i].parentNode.style.color = ""
    }
  }
}

<span><input type="radio" name="gender" class="one" value="Male" />Male</span> <br>
<span><input type="radio" name="gender" class="one" value="Female" />Female</span><br>
<span><input type="radio" name="gender" class="one" value="Other" />Other</span><br>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>

您可以将标签围成一圈，并使用nextSibling使用单选按钮为标签上色

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
      optionContainer[i].style.backgroundColor = "blue";
      optionContainer[i].nextSibling.style.backgroundColor = "blue";
      optionContainer[i].nextSibling.style.color = "yellow"
    } else {
      optionContainer[i].style.backgroundColor = "";
      optionContainer[i].nextSibling.style.backgroundColor = "";
      optionContainer[i].nextSibling.style.color = ""
    }
  }
}

<input type="radio" name="gender" class="one" value="Male" /><span>Male</span> <br>
<input type="radio" name="gender" class="one" value="Female" /><span>Female</span><br>
<input type="radio" name="gender" class="one" value="Other" /><span>Other</span><br>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>

Answer 4

 function selectedButton() {
        const optionContainer = document.querySelectorAll(".one");
        for (var i = 0; i < optionContainer.length; i++) {
            if (optionContainer[i].checked) {
                document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
                optionContainer[i].style.backgroundColor = "red";
            }
            else {
                optionContainer[i].style.backgroundColor = "";
            }
        }
    }

有没有办法在JavaScript中更改所选单选按钮的颜色？

4 个答案: