Saya memiliki sekelompok tombol radio, dan tombol kirim. Ketika saya mengklik tombol kirim, sebuah pesan ditampilkan yang memberi tahu saya tombol radio mana yang saya klik. Yang ingin saya lakukan sekarang adalah mengubah warna tombol radio yang dipilih, bagaimana saya bisa melakukannya? Saya telah mencoba banyak hal tanpa hasil. Ini kodenya

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>
0
Douk 23 Oktober 2019, 12:25

4 jawaban

Jawaban Terbaik

Anda dapat membungkus tombol radio ke div dan kemudian menerapkan kelas CSS saat dipilih. Kemudian, di CSS Anda, Anda dapat menentukan gaya yang diperlukan.

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>
0
Nidhin Joseph 23 Oktober 2019, 09:30
 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 = "";
            }
        }
    }
0
Nasira Mohamed Noufal 23 Oktober 2019, 09:57

Anda dapat menyesuaikan gaya tombol radio sesuai keinginan Anda. Penataan gaya langsung di radio tidak akan berfungsi.

Di bawah ini adalah contoh.

Anda juga belum memberikan gaya untuk kelas selected. Silakan tambahkan itu untuk melihat perubahan gaya.

Ini adalah gaya yang Anda butuhkan.

.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>
0
Nitheesh 23 Oktober 2019, 09:46

Anda dapat menyertakan seluruh elemen input dalam satu rentang dan menggunakan parentNode mengubah warna tombol radio lengkap

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>

Anda dapat melampirkan label dalam rentang dan menggunakan nextSibling mewarnainya dengan tombol radio

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>
0
ellipsis 23 Oktober 2019, 09:49