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

Question

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

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

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

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 

Answer 1

Я бы использовал .change() и this.checked:

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

-

При использовании this.checked
Энди E сделал большую статью о том, как мы склонны злоупотреблять jQuery: Используя удивительную силу jQuery для доступа к свойствам элемента . В статье специально рассматривается использование .attr("id"), но в случае, когда #checkbox является <input type="checkbox" /> элементом, проблема такая же для $(...).attr('checked') (или даже $(...).is(':checked')) против this.checked.

Answer 2

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

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

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

Answer 3

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

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});

Answer 4

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

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

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

Answer 5

Я нашел сумасшедшее решение для решения этой проблемы, флажок не установлен или не установлен вот мой алгоритм ... создать глобальную переменную, скажем, 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
     }
});

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

Answer 6

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

<!-- 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>

Answer 7

Я бы сделал:

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

Answer 8

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

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});

Answer 9

$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});

Answer 10

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

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