我的模板中有以下代碼，其中在單擊其包裝/父 div 時選擇了單選按鈕。
此外，我正在嘗試將所選單選選項的背景顏色red和文本顏色更改white為。
如果未選中單選選項，則將其背景顏色重置為默認值white，將文本顏色重置為black。
但是我的代碼背景和所有選擇選項的文本都設定為背景顏色white和文本顏色black。
如果選擇了其他選項，如何將選項的背景顏色設定為默認值white和文本顏色black。
Jquery 和 javascript 方法都受到贊賞。謝謝。
$('.selectRadio').click(function(event) {
/* console.log($('.selectRadio').length) */
;
let element = $('.selectRadio');
let radButton = $(this).find('input[type=radio]');
for (let i = 0; i <= element.length; i ) {
/* $('selector').index(this) */
if (element.index(this) - 1 == i) {
console.log(element.index(this) - 1);
console.log(i);
radButton.prop("checked", true);
radButton.parent().css("background-color", "red");
radButton.parent().css("color", "white");
} else {
radButton.parent().css("background-color", "unset");
radButton.parent().css("color", "unset");
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 selectRadio">
<div class="radio">
<label><input type="radio" name="optradio" >Option 1</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<label><input type="radio" name="optradio">Option 3</label>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
您需要radioButton在 for 回圈中再次找到，并將 if 邏輯反轉為類似下面的代碼片段。
$('.selectRadio').click(function(event) {
let element = $('.selectRadio');
let radButton = $(this).find('input[type=radio]');
radButton.parent().css("background-color", "red");
radButton.parent().css("color", "white");
for (let i = 0; i <= element.length; i ) {
let radButton = $(element[i]).find('input[type=radio]');
if (element.index(this) !== i) {
console.log(element.index(this));
radButton.parent().css("background-color", "white");
radButton.parent().css("color", "red");
} else {
radButton.prop("checked", true);
radButton.parent().css("background-color", "red");
radButton.parent().css("color", "white");
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 selectRadio">
<div class="radio">
<label><input type="radio" name="optradio" >Option 1</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<label><input type="radio" name="optradio">Option 3</label>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
您的代碼比它需要的要復雜得多。通過將“活動”狀態 CSS 規則放入您根據復選框的狀態添加/洗掉的類來簡化它。請注意，change在處理單選框和復選框輸入時應該使用事件處理程式。
let $containers = $('.radio');
$containers.find(':radio').on('change', e => {
$containers.removeClass('active'); // remove from all containers
$(e.target).closest('.radio').addClass('active'); // add class to current
});.active {
background-color: #F00;
color: #FFF;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 selectRadio">
<div class="radio">
<label>
<input type="radio" name="optradio" />
Option 1
</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<label>
<input type="radio" name="optradio">
Option 2
</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<label>
<input type="radio" name="optradio">
Option 3
</label>
</div>
</div>
</div>
</div>還值得注意的是，通過將單選按鈕移到 之外，您可以單獨使用 CSS 實作非常相似的效果label：
.radio :checked label {
color: #FFF;
background-color: #F00;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 selectRadio">
<div class="radio">
<input type="radio" name="optradio" id="opt1" />
<label for="opt1">Option 1</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<input type="radio" name="optradio" id="opt2" />
<label for="opt2">Option 2</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<input type="radio" name="optradio" id="opt3" />
<label for="opt3">Option 3</label>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381011.html
標籤：javascript 查询
上一篇：JQuery選擇串列項