我試圖在檢查時給單選按鈕的父元素添加一個類。
問題是，當使用removeClass時，該類似乎并沒有被洗掉。當復選框未被選中時，我仍然可以看到紅色的背景。
這是我目前想出的辦法 ......
。$('input:radio').change(function() {
if($(this).is(' ：checked')) {
$(this).parent().addClass('selected') 。
} else {
$(this).parent().removeClass('selected') 。
}
});.selected {
background-color: #fff5f5;
color: red;
}<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<p>選擇維修無人機：</p>/span>
<div class=""/span>>
< input type="radio" id="huey" name="drone" value="huey"
checked>/span>
<label for="huey"/span>> Huey</label>
</div>/span>
<div class="">
< input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey"/span>> Dewey</label>
</div>/span>
<div class="">
< input type="radio" id="louie" name="drone" value="louie">
<label for="louie"/span>> Louie</label>
</div>為了實作正確的行為，我需要如何改變我的代碼呢？
uj5u.com熱心網友回復：
不需要檢查is(':checked')條件中的else部分。
在點擊單選按鈕時；。
- 首先，執行
removeClass()從所有的單選按鈕。- 然后，
addClass()只對各自檢查過的父元素進行添加。
$('input:radio').change(function(){
$('input:radio[name=' this.name ' ').parent() 。) removeClass('selected'); //remove class "selected" from all radio button with respective name。
$(this).parent()。 addClass('selected'); //只給選中的單選按鈕添加 "selected "類。
});input[type="radio"] label {
cursor: 指標。
display: block;
height: 40px;
width: 200px;
text-align: center;
line-height: 40px;
}
.selected {
background-color: #fff5f5;
color: red;
}<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>/span>
<p>選擇維修無人機：</p>/span>
<div class=""/span>>
< input type="radio" id="huey" name="drone" value="huey">
<label for="huuey"> Huey</label>
</div>/span>
<div class="">
< input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey"/span>> Dewey</label>
</div>/span>
<div class="">
< input type="radio" id="louie" name="drone" value="louie">
<label for="louie"/span>> Louie</label>
</div>uj5u.com熱心網友回復：
首先洗掉父類的所有類，然后為選定的父類添加類。
。$('input[type=radio]')。 change（function（） {
$('input[type=radio]').each(function() {
$(this).parent().removeClass('selected') 。
});
$(this).parent().addClass('selected') 。
});.selected {
background-color: #fff5f5;
color: red;
}<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<p>選擇維修無人機：</p>/span>
<div class=""/span>>
< input type="radio" id="huuey" name="drone" value="huey" checked>
<label for="huey"/span>> Huey</label>
</div>/span>
<div class="">
< input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey"/span>> Dewey</label>
</div>/span>
<div class="">
< input type="radio" id="louie" name="drone" value="louie">
<label for="louie"/span>> Louie</label>
</div>uj5u.com熱心網友回復：
你可以只用css來解決這個問題
input[type="radio"/span>] ~ label {
cursor: 指標。
display: block;
height: 40px;
width: 200px;
text-align: center;
line-height: 40px;
}
input[type="radio"] {
position: absolute;
}
input[type="radio"]:checked~ label{
background-color: #fff5f5;
color: red;
}
uj5u.com熱心網友回復：
這樣就可以了
<style>
/* Css代碼 */
.selected {
background-color: #fff5f5;
color: red;
}
</style>
<!-- HTML代碼 -->
<div class="">
< input type="radio" id="huey" name="drone" value="huey"
checked />/span>
<label for="huey"/span>> Huey</label>
</div>/span>
<div class="">/span>
< input type="radio" id="dewey" name="drone" value="dewey" />
<label for="dewey"> Dewey</label>
</div>/span>
<div class="">/span>
< input type="radio" id="louie" name="drone" value="louie" />
<label for="louie"/span>> Louie</label>
</div>/span>
// js代碼
$('input:radio').change(function(){
$('input:radio').parent()。 removeClass('selected'); //從每個元素中移除類。
$(this).parent()。 addClass('selected'); /為被點擊元素添加calss。
});
uj5u.com熱心網友回復：
這是一個"無脂肪，僅有效的HTML和CSS"變體，語意結構略有改進...
。.radio-group label,
.radio-group .content {
display: block;
position: relative;
}
.radio-group label {
cursor: 指標。
}
.radio-group label：hover {
background-color: #fffbfb;
}
.radio-group .content {
z-index: 0;
padding: 1.3em 8px 8px 24px;
margin: -1.3em 0 0 0;
}
.radio-group .label,
.radio-group [type="radio"]/span>{
position: relative;
z-index: 1;
}
.radio-group [type="radio"]/span>{
top: 1px;
}
.radio-group [type="radio"]：checked ~ span{
color: red;
}
.radio-group [type="radio"]：checked ~ .content {
background-color: #fff5f5;
}<fieldset class="radio-group"> /span>
<legend>選擇一架維修無人機：</legend>/span>
<label>/span>
< input type="radio" name="drone" value="huey"/>
<span class="標簽"> Huey</span>
<span class="content">/span>。 ...更多的措辭內容...</span>
</label>/span>
<label>/span>
< input type="radio" name="drone" value="dewey"/>
<span class="標簽"> Dewey</span>/span>
<span class="content">/span>。 ...更多的措辭內容...</span>
</label>/span>
<label>/span>
< input type="radio" name="drone" value="louie"/>
<span class="標簽"> Louie</span>
<span class="content">/span>。 ...更多的措辭內容...</span>
</label>/span>
</fieldset>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/321658.html
標籤：