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/

JQuery将click事件绑定到复选框

4 个答案: