jQuery 复选框选中状态更改事件

Question

我希望在选中/取消选中复选框时触发客户端的事件：

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

基本上我希望它发生在页面上的每个复选框上。这种点击触发并检查状态的方法好吗？

我在想一定有一个更干净的 jQuery 方式。有人知道解决办法吗？

Answer 1

也可以如下实现。当复选框被触发时，div 或带有#checkbox id 的控件被隐藏或以其他方式显示。

 <script>
      $('#checkbox').on('click',function(){
          if(this.checked){
              $('#checkbox').hide();
           }else{
              $('#checkbox').show();
           }
      });
 </script>

Answer 2

试试这个“html-approach”acceptable for small JS projects

function msg(animal,is) {
  console.log(animal, is.checked);   // Do stuff
}

<input type="checkbox" oninput="msg('dog', this)" />Do you have a dog? <br>
<input type="checkbox" oninput="msg('frog',this)" />Do you have a frog?<br>
...

Answer 3

很简单，我就是这样用的：

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

问候！

Answer 4

为了方便以后有困难的人参考，如果您动态添加复选框，上面正确的accepted answer 将不起作用。您需要利用event delegation，它允许父节点从特定后代捕获冒泡事件并发出回调。

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

请注意，几乎总是不需要使用document 作为父选择器。而是选择更具体的父节点，以防止将事件传播到太多级别。

下面的例子展示了动态添加的 dom 节点的事件如何不触发之前定义的监听器。

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

Answer 5

这是找到复选框是否选中的解决方案。 使用#prop() 函数//

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

Answer 6

试试这个 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>

Answer 7

基于事件（点击事件）采取的行动。

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

Answer 8

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

Answer 9

也许这可能是您的替代方案。

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

Answer 10

只是另一种解决方案

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

Answer 11

如果您的意图是仅在选中的复选框上附加事件（因此当它们未选中并稍后再次选中时它会触发）那么这就是您想要的。

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

    })
})

如果您打算将事件附加到所有复选框（选中和未选中）

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

    })
})

如果您希望它仅在它们被检查（未检查）时触发，那么@James Allardice 在上面回答。

顺便说一句，input[type='checkbox']:checked 是 CSS 选择器。

Answer 12

绑定到change 事件而不是click。但是，您可能仍需要检查复选框是否被选中：

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

与click 事件相比，绑定change 事件的主要好处是，并非所有对复选框的点击都会导致它改变状态。如果您只想捕获导致复选框更改状态的事件，则需要恰当命名的 change 事件。 在 cmets 中编辑

另外请注意，我使用this.checked 而不是将元素包装在 jQuery 对象中并使用 jQuery 方法，仅仅是因为直接访问 DOM 元素的属性更短、更快。

编辑（参见 cmets）

要获得所有复选框，您有几个选项。您可以使用:checkbox 伪选择器：

$(":checkbox")

或者您可以使用attribute equals 选择器：

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