якщо прапорець встановлений, зробіть це


126

Перевіряючи прапорець, я хочу, щоб він повернувся <p> #0099ff.

Якщо я знімаю прапорець, я хочу, щоб це скасувало.

Код у мене поки що:

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

1
"... якщо це не встановлено, відключити цю ж функцію." - передана функція .click()викликається у події клацання. Тому я не розумію, що ви маєте на увазі під "включити" та "відключити". Якщо прапорець встановлений, ви можете викликати функцію a(). Але ви повинні написати функцію зворотного зв’язку, щоб викликати, коли прапорець не встановлений . Я збентежений.
jensgram

Можна, звичайно, .bind()і .unbind()події для іншого елемента, залежно від стану прапорця. Це те, що ти шукаєш?
jensgram

1
Вибачте за спам, але я зробив приклад того, про що я говорю.
jensgram

1
Я знаю, що це стара публікація, але тепер jQuery використовує prop()для того, для чого це питання хотів використати attr(); prop()метод не був створений тоді. Однак відповіді this.checked, ймовірно, все ще корисні.
трис

Відповіді:


235

Я хотів би використовувати .change() і this.checked:

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

-

Використання this.checked
Енді Е зробив чудову інформацію про те, як ми схильні до надмірного використання jQuery: Використовуючи приголомшливу силу jQuery для доступу до властивостей елемента . Стаття спеціально розглядає використання , .attr("id")але в тому випадку, #checkbox є<input type="checkbox" /> елементом питання є однаковим для $(...).attr('checked')(або навіть $(...).is(':checked')) проти this.checked.


48

Спробуйте це.

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

Іноді ми завищуємо jquery. Багато речей можна досягти за допомогою jquery за допомогою простого javascript.


34

Може статися так, що "цей.позначений" завжди "увімкнено". Тому я рекомендую:

$('#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 це прапорець (якщо ні, ідентифікатор є досить оманливим). this.checkedзроблю.
jensgram

@jensgram @fcalderan +1 Дякую за пораду! Я ніколи не бачив toggleClass з перемикачем. Я видаляю свою посаду, оскільки це марно. Вибачте, що настільки вибагливий, але я думаю, що ця відповідь була б на 100% ідеальною, не вибираючи "#checkbox" двічі: можливо, замість цього використовуйте $ (this)? Або розчин дженсграму?
напад

@attack, звичайно, ви можете кешувати свій елемент перед використанням (див. код зараз). this. перевіряється навіть швидше, ніж $ (..). attr ('перевірено')

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
     }
});

Код, описаний вище, може бути використаний у багатьох ситуаціях, щоб дізнатися, чи прапорець встановлений чи не встановлений. Концепція, що стоїть за ним, полягає у збереженні станів прапорця у змінній, тобто коли він увімкнено, вимкнено. Я сподіваюся, що логіку можна використовувати для вирішення вашої проблеми.


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

Можливо, ви можете скористатися цим кодом, щоб вчинити дії, коли прапорець встановлений або знятий.

$('#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');
     }
});
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.