jquery - JQuery 将点击事件绑定到复选框

Question

这是我的 html 的基本视图：

<form>
  <div id="part1">
     // some html form elements including checkboxes
  </div>
  <div id="part2">
    // more html code with more checkboxes
  </div>
  <div id=part2">
     // data table with numerous checkboxes built dynamically
  </div
</form>

我需要做的是将.click()事件分别绑定到第 1、2 和 3 部分中的复选框。我试过这个$('#part1:checkbox').click(...)，但没有奏效。如果我使用$("form :checkbox").click(...)相同的点击事件绑定到所有复选框而不仅仅是一组。我将如何分开这些？

Answer 1

您快到了。您只需要一个空格来分隔后代选择器：

$('#part1 :checkbox').click(function(){
    // code goes here
});

为了提高性能，你可能想使用这个：

$('#part1 input[type=checkbox]').click(function(){
    // code goes here
});

Answer 2

或者您为所有复选框提供相同的类名并为复选框提供相应的 div ID，因此您可以使用以下代码，

<input type="checkbox" class="checkall" id="part1">Part 1 

你的脚本是这样的。

$('.checkall').click(function () {
if (this.checked == false) {
$("." + $(this).attr("id")).hide();
}
});

Answer 3

我有一个类似的问题，这个 StackOverflow 页面是我偶然发现的第一个答案，但对它并不满意。我发现这篇文章https://www.kevinleary.net/jquery-checkbox-checked/有更好的解决方案。

$('input[name="subscribe"]').on('click', function(){
    if ( $(this).is(':checked') ) {
        $('input[name="email"]').show();
    } 
    else {
        $('input[name="email"]').hide();
    }
});

Answer 4

用这个：

$('#part1 input:checkbox').click(...)

http://api.jquery.com/checkbox-selector/