11 ответов:
Я бы использовать
.change()иthis.checked:$('#checkbox').change(function(){ var c = this.checked ? '#f00' : '#09f'; $('p').css('color', c); });--
С помощью
this.checked
Энди Е сделал большую запись о том, как мы склонны злоупотреблять jQuery: используя удивительную силу jQuery для доступа к свойствам элемента. В статье специально рассматривается использование.attr("id")но в случае, если#checkboxи an<input type="checkbox" />элемент проблема та же ибо$(...).attr('checked')(или даже$(...).is(':checked')) иthis.checked.
попробуйте это.
$('#checkbox').click(function(){ if (this.checked) { $('p').css('color', '#0099ff') } })иногда мы перебиваем jquery. Многие вещи могут быть достигнуты с помощью jquery с простым javascript.
может случиться ,что " это.проверено "всегда"включено". Поэтому я рекомендую:
$('#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 состояния
- неопределено государства
- 0 состояние
- 1 состояние
если флажок установлен,
$(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 (e){ if(this.checked){ // Do one thing } else{ // Do some other thing } });см.:https://www.w3schools.com/jsref/prop_checkbox_checked.asp
оптимальной реализации
$('#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'); } });
Comments