有沒有辦法更改 JavaScript 中所選單選按鈕的顏色？

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 class。 然后，在您的 CSS 中，您可以定義必要的 styles。

 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 class 的樣式。 請添加以查看樣式更改。

這是你需要的風格。

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

您可以將標簽括在 span 中，並通過單選按鈕使用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 = "";
            }
        }
    }