jQuery прапорець встановив прапорець

Я хочу, щоб подія запустила клієнтську сторону, коли прапорець встановлений / знятий:

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

В основному я хочу, щоб це сталося для кожного прапорця на сторінці. Чи цей спосіб стрільби по клацанню та перевірка стану добре?

Я думаю, що повинен бути більш чистий спосіб jQuery. Хтось знає рішення?

Прив’язати до changeподії замість click. Однак, ймовірно, вам потрібно буде все-таки перевірити, чи встановлено прапорець:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

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

Також зауважте, що я використовував this.checkedзамість загортання елемента в об’єкт jQuery та використовував методи jQuery, просто тому, що коротше та швидше отримати доступ до властивості елемента DOM.

Редагувати (див. Коментарі)

Щоб отримати всі прапорці, у вас є пара варіантів. Ви можете використовувати :checkboxпсевдоселектор:

$(":checkbox")

Або ви можете використовувати атрибут, рівний селектору:

$("input[type='checkbox']")

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

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

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

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

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

Хоча цей приклад відображає використання делегування подій для зйомки подій для конкретного вузла ( h1у цьому випадку) та видачі зворотного дзвінка для таких подій.

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

Просто ще одне рішення

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

Якщо ви маєте намір приєднати подію лише до встановлених прапорців (так що це буде спрацьовувати, коли вони не будуть відмічені та перевірені пізніше), це те, що ви хочете.

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

якщо ви маєте намір приєднати подію до всіх прапорців (встановлено прапорець і не поставлено галочку)

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

якщо ви хочете, щоб він запускався лише тоді, коли вони перевіряються (з невірно перевірених), тоді відповідь @James Allardice вище.

BTW input[type='checkbox']:checked- це селектор CSS.

$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});

Дія, що базується на події (на події клацання).

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

Без вжиття заходів на основі поточного стану.

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

можливо, це може бути альтернативою для вас.

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`

Це рішення, щоб знайти, чи прапорець встановлений чи ні. Використовуйте функцію #prop () //

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

Спробуйте цю перевірку jQuery

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>

Це дуже просто, саме так я використовую:

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

З повагою!