Javascript：如果选中并提交，则更改单选按钮的颜色

Question

我对 javascript 非常陌生，并开始进行测验。 单击提交按钮时，我希望选中的（假）单选按钮变为“黑色”，我试图阅读论坛，但我没有找到与此问题相关的任何内容。 我最后一次尝试是 JS 的最后一行

希望您能够帮助我。 这是我的东西（我知道它可能更简单）：有问题的部分从第 51 行开始。https://jsfiddle.net/av0txkco/

 function submitAnswers() { var total = 10; var score = 0; // Get User Input var q1 = document.forms["quizForm"]["q1"].value; var q2 = document.forms["quizForm"]["q2"].value; var q3 = document.forms["quizForm"]["q3"].value; var q4 = document.forms["quizForm"]["q4"].value; var q5 = document.forms["quizForm"]["q5"].value; var q6 = document.forms["quizForm"]["q6"].value; var q7 = document.forms["quizForm"]["q7"].value; var q8 = document.forms["quizForm"]["q8"].value; var q9 = document.forms["quizForm"]["q9"].value; var q10 = document.forms["quizForm"]["q10"].value; // Validation for (i = 1; i <= total; i++) { if (eval('q' + i) == null || eval('q' + i) == '') { alert('You missed question ' + i); return false; } } // Set Correct Answers var answers = ["a", "d", "b", "d", "a", "c", "a", "b", "b", "d"]; // Check Answers for (i = 1; i <= total; i++) { if (eval('q' + i) == answers[i - 1]) { score++; } } // Display Results var summary = document.getElementById('results'); results.innerHTML = '<h3>You scored <span>' + score + '</span> out of <span>' + total + '</span></h3>'; q1submit4 = document.getElementById("q1green").style.background = "green"; q2submit4 = document.getElementById("q2green").style.background = "green"; q3submit4 = document.getElementById("q3green").style.background = "green"; q4submit4 = document.getElementById("q4green").style.background = "green"; q5submit4 = document.getElementById("q5green").style.background = "green"; q6submit4 = document.getElementById("q6green").style.background = "green"; q7submit4 = document.getElementById("q7green").style.background = "green"; q8submit4 = document.getElementById("q8green").style.background = "green"; q9submit4 = document.getElementById("q9green").style.background = "green"; q10submit4 = document.getElementById("q10green").style.background = "green"; function myFunction() { var x = document.getElementById("q1red1").checked; document.getElementById("q1red1").style.background = "black"; } // alert('You scored '+score+' out of ' +total); // radios = document.querySelectorAll('input[type="radio"]:checked').style.background = "red" return false; }

 body{ background: white; color: black; font-family:'Arial', sans-serif; font-size:14px; } #container{ width:60%; background: white; margin:20px auto; overflow:auto; padding:25px; } header{ text-align:center; border-bottom: black solid 1px; } header h1{ margin:0; padding:0; } header p{ padding:0; margin-top:5px; color: black; } section{ min-height:400px; } footer{ text-align:center; } input[type='submit']{ background: black; border:0; color: white; padding:10px 15px; cursor:pointer; } #results h3{ background: white; padding:10px; margin:10px 0; } #results span{ color: green; font-weight:bold; } /* RADIOBUTTON */.radiobtn { position: relative; display: block; }.radiobtn label { display: block; background: grey; color: white; border-radius: 5px; padding: 10px 20px; border: 2px solid black; margin-bottom: 5px; cursor: pointer; } /*.radiobtn label:after, .radiobtn label:before { content: ""; position: absolute; right: 11px; top: 11px; width: 20px; height: 20px; border-radius: 3px; background: black; } */.radiobtn label:before { background: transparent; transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s; z-index: 2; overflow: hidden; background-repeat: no-repeat; background-size: 13px; background-position: center; width: 0; height: 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+); }.radiobtn input[type="radio"] { display: none; position: absolute; width: 100%; appearance: none; }.radiobtn input[type="radio"]:checked + label { background: red; animation-name: blink; animation-duration: 1s; border-color: black; }.radiobtn input[type="radio"]:checked + label:after { background: grey; }.radiobtn input[type="radio"]:checked + label:before { width: 20px; height: 20px; }

 <div id="container"> <header> <h1>Simple JavaScript Quiz</h1> <p>Test your knowledge in <strong>Math</strong></p> </header> <section> <form name="quizForm" onsubmit="return submitAnswers()"> <h3>1. 1+1?</h3> <div class="radiobtn" id="good"> <input type="radio" name="q1" value="a" id="q1a" /> <label id="q1green" for="q1a">2</label> </div> <div class="radiobtn"> <input type="radio" name="q1" value="b" id="q1b" /> <label id="q1red1" for="q1b">3</label> </div> <div class="radiobtn"> <input type="radio" name="q1" value="c" id="q1c" /> <label for="q1c">4</label> </div> <div class="radiobtn"> <input type="radio" name="q1" value="d" id="q1d" /> <label for="q1d">5</label> </div> <h3>2. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q2" value="a" id="q2a" /> <label for="q2a">3</label> </div> <div class="radiobtn"> <input type="radio" name="q2" value="b" id="q2b" /> <label for="q2b">4</label> </div> <div class="radiobtn"> <input type="radio" name="q2" value="c" id="q2c" /> <label for="q2c">5</label> </div> <div class="radiobtn"> <input type="radio" name="q2" value="d" id="q2d" /> <label id="q2green" for="q2d">2</label> </div> <h3>3. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q3" value="a" id="q3a" /> <label for="q3a">1</label> </div> <div class="radiobtn"> <input type="radio" name="q3" value="b" id="q3b" /> <label id="q3green" for="q3b">2</label> </div> <div class="radiobtn"> <input type="radio" name="q3" value="c" id="q3c" /> <label for="q3c">5</label> </div> <div class="radiobtn"> <input type="radio" name="q3" value="d" id="q3d" /> <label for="q3d">6</label> </div> <h3>4. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q4" value="a" id="q4a" /> <label for="q4a">1</label> </div> <div class="radiobtn"> <input type="radio" name="q4" value="b" id="q4b" /> <label for="q4b">12</label> </div> <div class="radiobtn"> <input type="radio" name="q4" value="c" id="q4c" /> <label for="q4c">3</label> </div> <div class="radiobtn"> <input type="radio" name="q4" value="d" id="q4d" /> <label id="q4green" for="q4d">2</label> </div> <h3>5. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q5" value="a" id="q5a" /> <label id="q5green" for="q5a">2</label> </div> <div class="radiobtn"> <input type="radio" name="q5" value="b" id="q5b" /> <label for="q5b">3</label> </div> <div class="radiobtn"> <input type="radio" name="q5" value="c" id="q5c" /> <label for="q5c">5</label> </div> <div class="radiobtn"> <input type="radio" name="q5" value="d" id="q5d" /> <label for="q5d">4</label> </div> <h3>6. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q6" value="a" id="q6a" /> <label for="q6a">10</label> </div> <div class="radiobtn"> <input type="radio" name="q6" value="b" id="q6b" /> <label for="q6b">6</label> </div> <div class="radiobtn"> <input type="radio" name="q6" value="c" id="q6c" /> <label id="q6green" for="q6c">2</label> </div> <div class="radiobtn"> <input type="radio" name="q6" value="d" id="q6d" /> <label for="q5d">1</label> </div> <h3>7. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q7" value="a" id="q7a" /> <label id="q7green" for="q7a">2</label> </div> <div class="radiobtn"> <input type="radio" name="q7" value="b" id="q7b" /> <label for="q7b">6</label> </div> <div class="radiobtn"> <input type="radio" name="q7" value="c" id="q7c" /> <label for="q7c">12</label> </div> <div class="radiobtn"> <input type="radio" name="q7" value="d" id="q7d" /> <label for="q7d">1</label> </div> <h3>8. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q8" value="a" id="q8a" /> <label for="q8a">5</label> </div> <div class="radiobtn"> <input type="radio" name="q8" value="b" id="q8b" /> <label id="q8green" for="q8b">2</label> </div> <div class="radiobtn"> <input type="radio" name="q8" value="c" id="q8c" /> <label for="q8c">12</label> </div> <div class="radiobtn"> <input type="radio" name="q8" value="d" id="q8d" /> <label for="q8d">1</label> </div> <h3>9. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q9" value="a" id="q9a" /> <label for="q9a">5</label> </div> <div class="radiobtn"> <input type="radio" name="q9" value="b" id="q9b" /> <label id="q9green" for="q9b">2</label> </div> <div class="radiobtn"> <input type="radio" name="q9" value="c" id="q9c" /> <label for="q9c">12</label> </div> <div class="radiobtn"> <input type="radio" name="q9" value="d" id="q9d" /> <label for="q9d">1</label> </div> <h3>10. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q10" value="a" id="q10a" /> <label for="q10a">5</label> </div> <div class="radiobtn"> <input type="radio" name="q10" value="b" id="q10b" /> <label for="q10b">22</label> </div> <div class="radiobtn"> <input type="radio" name="q10" value="c" id="q10c" /> <label for="q10c">12</label> </div> <div class="radiobtn"> <input type="radio" name="q10" value="d" id="q10d" /> <label id="q10green" for="q10d">2</label> </div> <br><br> <input type="submit" value="Submit Answers"> </form> </section> <div id="results"></div> <footer> <p>Heyho</p> </footer> </div>

Answer 1

遗憾的是，单选按钮的外观取决于浏览器。 你能做的事情是有限度的。

但是，有一些方法可以解决它。 例如，在下面，我隐藏了单选按钮（以保持常规功能）； 但是，我改为显示一些图标。

为了更容易理解和 go 直接到点，我使用 jQuery 和 FontAwesome 但你可以使用任何你想要的东西。

 $(function() { $('input[type=radio].toggle').on("change", function () { $.each($('input[type=radio].toggle[name='.concat($(this).attr('name')).concat(']')), function () { $('label[for=' + $(this).attr('id') + '] i.fa').toggleClass('fa-toggle-on', this.checked).toggleClass('fa-toggle-off', .this.checked),toggleClass('black'. this.checked),toggleClass('blue'. ;this;checked); }); }); });

 .toggle { position: absolute; visibility: hidden; } span.toggle-icon { font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } span.toggle-icon.down::before { content: "\f0ab"; } span.toggle-icon.up::before { content: "\f0aa"; }.blue { color: blue; }.black{ color: black; }.muted { color: gray; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="btn-toggle success"> <input type="radio" class="toggle" name="radio-toggle-group" id="radio-toggle-1" value="radio1" checked=""> <label class="radio" for="radio-toggle-1"> <i class="fa fa-2x fa-toggle-on"></i> <span class="text success">Option 1</span> </label> </div> <div class="btn-toggle warning"> <input type="radio" class="toggle" name="radio-toggle-group" id="radio-toggle-2" value="radio2"> <label class="radio" for="radio-toggle-2"> <i class="fa fa-2x fa-toggle-off blue"></i> <span class="text warning">Option 2</span> </label> </div> <div class="btn-toggle muted"> <input type="radio" class="toggle" name="radio-toggle-group" id="radio-toggle-3" value="radio2" disabled=""> <label class="radio" for="radio-toggle-3"> <i class="fa fa-2x fa-toggle-off muted"></i> <span class="text muted">Option 3 (Disabled)</span> </label> </div>

Answer 2

有几个问题。

1. DRY 不要重复自己。 使用循环。
2. 您没有在任何地方调用 myFunction 。
3. 不要使用评估。 没有必要。
4. 您可以更改 label 背景颜色，但不能更改收音机

如果需要，您可以将每个 rad 与单击处理程序连接起来，单击处理程序将其变为红色或绿色。

请研究下面的代码

 // Set Correct Answers var answers = ["a", "d", "b", "d", "a", "c", "a", "b", "b", "d"]; function submitAnswers(e) { e.preventDefault(); var score = 0; // Validation for (i = 0; i < answers.length; i++) { var rad = document.querySelector("input[name=q" + (i + 1) + "]:checked"); if (.rad || rad;length === 0) { alert('You missed question ' + (i + 1)); return false. } var ok = rad;value === answers[i]? score += ok: 1; 0. rad.nextElementSibling.style?backgroundColor = ok: "green"; "red". } // Display Results document.getElementById('results').innerHTML = '<h3>You scored <span>' + score + '</span> out of <span>' + answers;length + '</span></h3>'. } window,addEventListener("load". function() { document.getElementById("quizForm"),addEventListener("submit"; submitAnswers); });

 body { background: white; color: black; font-family: 'Arial', sans-serif; font-size: 14px; } #container { width: 60%; background: white; margin: 20px auto; overflow: auto; padding: 25px; } header { text-align: center; border-bottom: black solid 1px; } header h1 { margin: 0; padding: 0; } header p { padding: 0; margin-top: 5px; color: black; } section { min-height: 400px; } footer { text-align: center; } input[type='submit'] { background: black; border: 0; color: white; padding: 10px 15px; cursor: pointer; } #results h3 { background: white; padding: 10px; margin: 10px 0; } #results span { color: green; font-weight: bold; } /* RADIOBUTTON */.radiobtn { position: relative; display: block; }.radiobtn label { display: block; background: grey; color: white; border-radius: 5px; padding: 10px 20px; border: 2px solid black; margin-bottom: 5px; cursor: pointer; } /*.radiobtn label:after, .radiobtn label:before { content: ""; position: absolute; right: 11px; top: 11px; width: 20px; height: 20px; border-radius: 3px; background: black; } */.radiobtn label:before { background: transparent; transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s; z-index: 2; overflow: hidden; background-repeat: no-repeat; background-size: 13px; background-position: center; width: 0; height: 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+); }.radiobtn input[type="radio"] { display: none; position: absolute; width: 100%; appearance: none; }.radiobtn input[type="radio"]:checked+label { background: red; animation-name: blink; animation-duration: 1s; border-color: black; }.radiobtn input[type="radio"]:checked+label:after { background: grey; }.radiobtn input[type="radio"]:checked+label:before { width: 20px; height: 20px; }

 <div id="container"> <header> <h1>Simple JavaScript Quiz</h1> <p>Test your knowledge in <strong>Math</strong></p> </header> <section> <form id="quizForm"> <h3>1. 1+1?</h3> <div class="radiobtn" id="good"> <input type="radio" name="q1" value="a" id="q1a" /> <label id="q1green" for="q1a">2</label> </div> <div class="radiobtn"> <input type="radio" name="q1" value="b" id="q1b" /> <label id="q1red1" for="q1b">3</label> </div> <div class="radiobtn"> <input type="radio" name="q1" value="c" id="q1c" /> <label for="q1c">4</label> </div> <div class="radiobtn"> <input type="radio" name="q1" value="d" id="q1d" /> <label for="q1d">5</label> </div> <h3>2. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q2" value="a" id="q2a" /> <label for="q2a">3</label> </div> <div class="radiobtn"> <input type="radio" name="q2" value="b" id="q2b" /> <label for="q2b">4</label> </div> <div class="radiobtn"> <input type="radio" name="q2" value="c" id="q2c" /> <label for="q2c">5</label> </div> <div class="radiobtn"> <input type="radio" name="q2" value="d" id="q2d" /> <label id="q2green" for="q2d">2</label> </div> <h3>3. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q3" value="a" id="q3a" /> <label for="q3a">1</label> </div> <div class="radiobtn"> <input type="radio" name="q3" value="b" id="q3b" /> <label id="q3green" for="q3b">2</label> </div> <div class="radiobtn"> <input type="radio" name="q3" value="c" id="q3c" /> <label for="q3c">5</label> </div> <div class="radiobtn"> <input type="radio" name="q3" value="d" id="q3d" /> <label for="q3d">6</label> </div> <h3>4. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q4" value="a" id="q4a" /> <label for="q4a">1</label> </div> <div class="radiobtn"> <input type="radio" name="q4" value="b" id="q4b" /> <label for="q4b">12</label> </div> <div class="radiobtn"> <input type="radio" name="q4" value="c" id="q4c" /> <label for="q4c">3</label> </div> <div class="radiobtn"> <input type="radio" name="q4" value="d" id="q4d" /> <label id="q4green" for="q4d">2</label> </div> <h3>5. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q5" value="a" id="q5a" /> <label id="q5green" for="q5a">2</label> </div> <div class="radiobtn"> <input type="radio" name="q5" value="b" id="q5b" /> <label for="q5b">3</label> </div> <div class="radiobtn"> <input type="radio" name="q5" value="c" id="q5c" /> <label for="q5c">5</label> </div> <div class="radiobtn"> <input type="radio" name="q5" value="d" id="q5d" /> <label for="q5d">4</label> </div> <h3>6. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q6" value="a" id="q6a" /> <label for="q6a">10</label> </div> <div class="radiobtn"> <input type="radio" name="q6" value="b" id="q6b" /> <label for="q6b">6</label> </div> <div class="radiobtn"> <input type="radio" name="q6" value="c" id="q6c" /> <label id="q6green" for="q6c">2</label> </div> <div class="radiobtn"> <input type="radio" name="q6" value="d" id="q6d" /> <label for="q5d">1</label> </div> <h3>7. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q7" value="a" id="q7a" /> <label id="q7green" for="q7a">2</label> </div> <div class="radiobtn"> <input type="radio" name="q7" value="b" id="q7b" /> <label for="q7b">6</label> </div> <div class="radiobtn"> <input type="radio" name="q7" value="c" id="q7c" /> <label for="q7c">12</label> </div> <div class="radiobtn"> <input type="radio" name="q7" value="d" id="q7d" /> <label for="q7d">1</label> </div> <h3>8. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q8" value="a" id="q8a" /> <label for="q8a">5</label> </div> <div class="radiobtn"> <input type="radio" name="q8" value="b" id="q8b" /> <label id="q8green" for="q8b">2</label> </div> <div class="radiobtn"> <input type="radio" name="q8" value="c" id="q8c" /> <label for="q8c">12</label> </div> <div class="radiobtn"> <input type="radio" name="q8" value="d" id="q8d" /> <label for="q8d">1</label> </div> <h3>9. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q9" value="a" id="q9a" /> <label for="q9a">5</label> </div> <div class="radiobtn"> <input type="radio" name="q9" value="b" id="q9b" /> <label id="q9green" for="q9b">2</label> </div> <div class="radiobtn"> <input type="radio" name="q9" value="c" id="q9c" /> <label for="q9c">12</label> </div> <div class="radiobtn"> <input type="radio" name="q9" value="d" id="q9d" /> <label for="q9d">1</label> </div> <h3>10. 1+1</h3> <div class="radiobtn"> <input type="radio" name="q10" value="a" id="q10a" /> <label for="q10a">5</label> </div> <div class="radiobtn"> <input type="radio" name="q10" value="b" id="q10b" /> <label for="q10b">22</label> </div> <div class="radiobtn"> <input type="radio" name="q10" value="c" id="q10c" /> <label for="q10c">12</label> </div> <div class="radiobtn"> <input type="radio" name="q10" value="d" id="q10d" /> <label id="q10green" for="q10d">2</label> </div> <br><br> <input type="submit" value="Submit Answers"> </form> </section> <div id="results"></div> <footer> <p>Heyho</p> </footer> </div>