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

标签： javascripthtml

Answer 1

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

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

为了更容易理解并直接进入重点，我使用的是 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>