Если флажок установлен, сделайте это

Когда я устанавливаю флажок, я хочу, чтобы он менял <p> #0099ff.

Когда я сниму флажок, я хочу, чтобы он отменил это.

Код, который я до сих пор:

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 
114
22 нояб. '10 в 11:24
источник поделиться
10 ответов

Я бы использовал .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.

217
22 нояб. '10 в 11:27
источник

Попробуйте это.

$('#checkbox').click(function(){
    if (this.checked) {
        $('p').css('color', '#0099ff')
    }
}) 

Иногда мы переполняем jquery. Многие вещи могут быть достигнуты с помощью jquery с простым javascript.

43
22 нояб. '10 в 11:26
источник

Может случиться так, что "this.checked" всегда "on". Поэтому я рекомендую:

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});
28
03 окт. '13 в 23:05
источник

лучше, если вы определяете класс с другим цветом, тогда вы переключаете класс

$('#checkbox').click(function(){
    var chk = $(this);
    $('p').toggleClass('selected', chk.attr('checked'));
}) 

таким образом ваш код будет более чистым, потому что вам не нужно указывать все свойства css (скажем, вы хотите добавить границу, стиль текста или другое...), но вы просто переключаете класс

21
22 нояб. '10 в 11:26
источник

Я нашел сумасшедшее решение для решения этой проблемы с флажком, не отмеченным или отмеченным вот мой алгоритм... создать глобальную переменную позволяет сказать var check_holder

check_holder имеет 3 состояния

  • undefined состояние
  • 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
     }
});

Приведенный выше код можно использовать во многих ситуациях, чтобы узнать, был ли флажок установлен или не установлен. Концепция заключается в том, чтобы сохранить состояния флажка в переменной, то есть когда она включена, выключена. Надеюсь, что логика может быть использована для решения вашей проблемы.

4
28 янв. '14 в 17:35
источник

Проверьте этот код:      

<!-- 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>
2
04 апр. '15 в 14:07
источник
$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});
1
22 нояб. '10 в 11:27
источник

Возможно, вы можете пойти с этим кодом, чтобы выполнить действия, когда флажок установлен или снят флажок.

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});
1
03 апр. '16 в 16:37
источник

Почему бы не использовать встроенные события?

$('#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');
     }
});
0
25 июня '17 в 16:30
источник

Оптимальная реализация

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

Demo

$('#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>
0
03 апр. '16 в 16:51
источник

Посмотрите другие вопросы по меткам или Задайте вопрос