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

126

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

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

Код, который у меня есть:

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 
android.nick
источник
1
«... когда он не отмечен, чтобы отключить ту же функцию». - переданная функция .click()вызывается при событии щелчка. Поэтому я не понимаю, что вы имеете в виду под «включить» и «отключить». Если флажок установлен, вы можете вызывать функцию a(). Но вы должны написать обратную функцию, которая будет вызываться, когда флажок не установлен . Я запутался.
jensgram
Вы можете, конечно, .bind()и .unbind()события другого элемента в зависимости от состояния флажка. Это то, что тебе нужно?
jensgram
1
Извините за рассылку спама, но я привел пример того, о чем говорю.
jensgram
1
Я знаю, что это старый пост, но теперь jQuery использует то, prop()для чего этот вопрос хотел использовать attr(); prop()метод не был создан тогда. Однако ответы о том this.checked, вероятно, все еще полезны.
trysis

Ответы:

235

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

jensgram
источник
48

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

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

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

Chinmayee G
источник
34

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

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});
Бенни Нойгебауэр
источник
В моем случае я просто изменил на $(':checkbox'), чтобы заставить его работать;)
Pathros
21

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

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

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


источник
4
+1 за универсальное решение. Там нет никаких оснований делать $('#checkbox').attr('checked'), однако, если мы знаем , что #checkbox это флажок (если нет, то ID скорее вводит в заблуждение). this.checkedСделаю.
jensgram
@jensgram @fcalderan +1 Спасибо за подсказку! Я никогда не видел toggleClass с переключателем. Удаляю свой пост как бесполезный. Извините за такую ​​разборчивость, но я думаю, что этот ответ был бы на 100% идеальным без двойного выбора #checkbox: может быть, вместо этого использовать $ (this)? Или решение jensgram?
атака
@attack, конечно, вы можете кэшировать свой элемент перед использованием (см. код сейчас). this.checked даже быстрее, чем $ (..). attr ('checked')
4

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

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

  1. неопределенное состояние
  2. 0 состояние
  3. 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
     }
});

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

zedecliff
источник
1
Решение действительно безумное, но не в хорошем смысле. Да, глобальные переменные могут помочь вам решить проблему сегодня, но они почти наверняка станут проблемой для вас завтра. По возможности старайтесь избегать их, а это в 99% случаев. Они делают невозможным рассуждать о вашем коде, не беспокоясь о глобальном состоянии. Одна глобальная переменная может показаться невинной, но быстро она становится десятками, а не сотнями. Был там, видел это, и это некрасиво.
bijancn
3

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

<!-- 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>
Прабхджит Сингх
источник
1
$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});
Klaster_1
источник
1

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

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});
Санджив Мальвия
источник
0

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

$('#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>

Джон Слегерс
источник
0

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

$('#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');
     }
});
Пол 501
источник