Когда я устанавливаю флажок, я хочу, чтобы он менял <p> #0099ff.
Когда я сниму флажок, я хочу, чтобы он отменил это.
Код, который я до сих пор:
$('#checkbox').click(function(){
if ($('#checkbox').attr('checked')) {
/* NOT SURE WHAT TO DO HERE */
}
})
Я бы использовал .change() и this.checked:
$('#checkbox').change(function(){
var c = this.checked ? '#f00' : '#09f';
$('p').css('color', c);
});
-
При использовании this.checked
Andy E сделал отличную рецензию на то, как мы склонны чрезмерно использовать jQuery: Используя потрясающую силу jQuery для доступа к свойствам элемента. В статье рассматривается использование .attr("id"), но в случае, когда #checkbox является элементом <input type="checkbox" />, проблема одинакова для $(...).attr('checked') (или даже $(...).is(':checked')) по сравнению с this.checked.
Попробуйте это.
$('#checkbox').click(function(){
if (this.checked) {
$('p').css('color', '#0099ff')
}
})
Иногда мы переполняем jquery. Многие вещи могут быть достигнуты с помощью jquery с простым javascript.
Может случиться так, что "this.checked" всегда "on". Поэтому я рекомендую:
$('#checkbox').change(function() {
if ($(this).is(':checked')) {
console.log('Checked');
} else {
console.log('Unchecked');
}
});
лучше, если вы определяете класс с другим цветом, тогда вы переключаете класс
$('#checkbox').click(function(){
var chk = $(this);
$('p').toggleClass('selected', chk.attr('checked'));
})
таким образом ваш код будет более чистым, потому что вам не нужно указывать все свойства css (скажем, вы хотите добавить границу, стиль текста или другое...), но вы просто переключаете класс
Я нашел сумасшедшее решение для решения этой проблемы с флажком, не отмеченным или отмеченным вот мой алгоритм... создать глобальную переменную позволяет сказать var check_holder
check_holder имеет 3 состояния
Если установлен флажок,
$(document).on("click","#check",function(){
if(typeof(check_holder)=="undefined"){
//this means that it is the first time and the check is going to be checked
//do something
check_holder=1; //indicates that the is checked,it is in checked state
}
else if(check_holder==1){
//do something when the check is going to be unchecked
check_holder=0; //it means that it is not checked,it is in unchecked state
}
else if(check_holder==0){
//do something when the check is going to be checked
check_holder=1;//indicates that it is in a checked state
}
});
Приведенный выше код можно использовать во многих ситуациях, чтобы узнать, был ли флажок установлен или не установлен. Концепция заключается в том, чтобы сохранить состояния флажка в переменной, то есть когда она включена, выключена. Надеюсь, что логика может быть использована для решения вашей проблемы.
Проверьте этот код:
<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
alert("checked");
}
else if($(this).prop("checked") == false){
alert("Checkbox is unchecked.");
}
});
</script>
$('#checkbox').change(function(){
(this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});
Возможно, вы можете пойти с этим кодом, чтобы выполнить действия, когда флажок установлен или снят флажок.
$('#chk').on('click',function(){
if(this.checked==true){
alert('yes');
}else{
alert('no');
}
});
$('#checkbox').on('change', function(){
$('p').css('color', this.checked ? '#09f' : '');
});
$('#checkbox').on('change', function(){
$('p').css('color', this.checked ? '#09f' : '');
});<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>Почему бы не использовать встроенные события?
$('#checkbox').click(function(e){
if(e.target.checked) {
// code to run if checked
console.log('Checked');
} else {
//code to run if unchecked
console.log('Unchecked');
}
});