jquery複選框父元素css

試圖改變標籤背景顏色，取決於如果複選框裏面被選中或未選中。jquery複選框父元素css

注意：當前標籤背景會在第一次點擊時發生變化，但在此之後它不會更改爲無或取消選中框。

<div class="elemclass"> 
<label for="elem1"><input id="elem1" type="checkbox" class="elembox1" />Checkbox I</label> 
<label for="elem2"><input id="elem2" type="checkbox" class="elembox2" />Checkbox II</label> 
<label for="elem3"><input id="elem3" type="checkbox" class="elembox3" />Checkbox III</label> 
<label for="elem4"><input id="elem4" type="checkbox" class="elembox4" />Checkbox IV</label> 
</div> 
$(document).ready(function() { 
    $('.elemclass > label').live('click', function() 
    { 
    var input = $(this).children('input'); 
    if(input.prop('checked', true)) 
    { 
     $(input).parent().css('background', 'rgb(132,249,144)'); 
    } 
    else 
    { 
     $(input).parent().css('background-color', 'none'); 
    } 
    }); 
});

小提琴：

https://jsfiddle.net/kdpg13zw/

來源

2016-03-03 Diamonte

標籤回地面中的jsfiddle例如改變。對？？不明白這裏有什麼問題。 – e11438

如果您的演示代碼 - 您提供的用於重現問題的代碼 - 按照您所說的要求運行，則需要非常清楚地解釋您在其他地方遇到的問題。但是，鑑於代碼起作用，您的問題不在該代碼中。 –

如果你嘗試它，小提琴不起作用，它不會將背景變回白色或取消選中框。 – Diamonte

我覺得if(input.prop('checked', true))是你的問題。在我看來，檢查複選框是否被選中的最好方法是。這是你更新的提琴：https://jsfiddle.net/kdpg13zw/3/

$(document).ready(function() { 
 
    $('.elemclass > label').click(function() { 
 
    var input = $(this).children('input'); 
 
    if (input.is(":checked")) { 
 
     $(input).parent().css('background', 'rgb(132,249,144)'); 
 
    } else { 
 
     $(input).parent().css('background-color', ''); 
 
    } 
 
    }); 
 
});

.elemclass > label { 
 
    border-radius: 5px; 
 
    border: 1px solid #cacaca; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="elemclass"> 
 
    <label for="elem1"> 
 
    <input id="elem1" type="checkbox" class="elembox1" />Checkbox I</label> 
 
    <label for="elem2"> 
 
    <input id="elem2" type="checkbox" class="elembox2" />Checkbox II</label> 
 
    <label for="elem3"> 
 
    <input id="elem3" type="checkbox" class="elembox3" />Checkbox III</label> 
 
    <label for="elem4"> 
 
    <input id="elem4" type="checkbox" class="elembox4" />Checkbox IV</label> 
 
</div>

請注意：background-color: none不工作無處不在（例如，它不會對StackOverflow的代碼預覽工作，因爲你可以在阿齊姆來看看答案，綠色不會消失;-)）。你有css('background-color', '')

來源

2016-03-03 12:29:35

我接受你的答案，因爲更多的細節，認爲@Viku有正確的答案。只是一個說明，我使用.live（'點擊'，因爲這是內部引導模式，並指出使用.click時有問題（這是其他主題無論如何... – Diamonte

很高興你得到它的工作！:) –

你可以像在:checkbox變化事件後。

$('.elemclass :checkbox').change(function() { 
 
    if (this.checked) { 
 
    $(this).parent().css('background', 'rgb(132,249,144)'); 
 
    } else { 
 
    $(this).parent().css('background', 'none'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="elemclass"> 
 
    <label for="elem1"> 
 
    <input id="elem1" type="checkbox" class="elembox1" />Checkbox I</label> 
 
    <label for="elem2"> 
 
    <input id="elem2" type="checkbox" class="elembox2" />Checkbox II</label> 
 
    <label for="elem3"> 
 
    <input id="elem3" type="checkbox" class="elembox3" />Checkbox III</label> 
 
    <label for="elem4"> 
 
    <input id="elem4" type="checkbox" class="elembox4" />Checkbox IV</label> 
 
</div>

來源

2016-03-03 12:26:06 Azim

這更好將解決售後服務您的問題..

$(document).ready(function() { 
 
    $('.elemclass > label').on('click', function() { 
 
    var input = $(this).children('input'); 
 
    if ($(input).prop('checked') == true) { 
 
     $(input).parent().css('background', 'rgb(132,249,144)'); 
 
    } else { 
 
     $(input).parent().css('background-color', 'none'); 
 
    } 
 
    }); 
 
});

.elemclass > label { 
 
    border-radius: 5px; 
 
    border: 1px solid #cacaca; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="elemclass"> 
 
    <label for="elem1"> 
 
    <input id="elem1" type="checkbox" class="elembox1" />Checkbox I</label> 
 
    <label for="elem2"> 
 
    <input id="elem2" type="checkbox" class="elembox2" />Checkbox II</label> 
 
    <label for="elem3"> 
 
    <input id="elem3" type="checkbox" class="elembox3" />Checkbox III</label> 
 
    <label for="elem4"> 
 
    <input id="elem4" type="checkbox" class="elembox4" />Checkbox IV</label> 
 
</div>

來源

2016-03-03 12:34:23 ViKu

jquery複選框父元素css

回答

相關問題