javascript - 选择所有复选框后会触发什么事件?我如何接收数据?

标签 javascript jquery html events checkbox

<分区>

我有一个单击事件,它选中了表单中的所有复选框。我还有一个 on change 函数,当每个复选框被单独点击时触发,但如果用户选择所有复选框它不会触发。

我最初只有一个点击复选框,但将其切换为一个更改事件处理程序,但当我选择所有复选框时它仍然没有收到更改事件。

以下代码对除“图表”列之外的每一列进行排序,它成功地在每个复选框中放置了一个检查。

$('th').click(function(){
        if(this.innerHTML != 'Graph') {
            var table = $(this).parents('table').eq(0)
            var rows = table.find('tr:gt(1)').toArray().sort(comparer($(this).index()))
            this.asc = !this.asc
            if (!this.asc){rows = rows.reverse()}
            for (var i = 0; i < rows.length; i++){table.append(rows[i])}    
        }
        else {
            let checkBoxes = $('.graph-this');
            checkBoxes.prop('checked', !checkBoxes.prop('checked'));
        }
    });

但是,

$(".graph-this").on('change', function(event){
    /* this does stuff when I click on each checkbox individually, but not when I click on the 'Graph' th.*/
}

检查被放置在复选框内,但没有触发更改事件。我是否遗漏了什么,或者是否有另一个可以使用的事件(除了更改)在单击“图表”时在复选框上触发?

感谢您的帮助!

最佳答案

只需在您的代码中,将此添加到您的 else 子句的末尾:

checkBoxes.trigger('change');

更改 prop 值不会触发 onChange,您必须手动执行此操作,因为我没有您的 html,所以我只是想出了这个最小的示例向你解释。

$('#select-all').change(function () {
  let value = $(this).prop('checked');
  $('.single-checkbox').prop('checked', value);
  
  // Trigger all single checkboxes change listener
  $('.single-checkbox').trigger('change');
})

$('.single-checkbox').change(function() {
  console.log('triggered single checkbox');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<html>

  <body>
    <input type="checkbox" id="select-all"/>Select All
    <input type="checkbox" class="single-checkbox"/>
    <input type="checkbox" class="single-checkbox"/>
    <input type="checkbox" class="single-checkbox"/>
  </body>

</html>

关于javascript - 选择所有复选框后会触发什么事件?我如何接收数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58822855/

相关文章:

html - 外部文件加载主页 CSS 文件

javascript - 取消 HTML onSubmit 事件

html - 绝对定位的 div 在绝对定位的父级内滚动

javascript - 如何在ajax加载的页面上实现 "back"按钮

javascript - 使用 javascript 库的自定义形状图

javascript - 如何从 Handlebars 模板中选择元素?

javascript - 如何使弹出式 div 在单击时隐藏/显示

javascript - 如何修复 "let i = 0 "循环中的 "for"值在完成循环后再次变为 0?

使用 ajax jquery 和 json 的 Javascript 不适用于 IE 或 chrome 帮助!

javascript - IE 11 平滑滚动不触发中间滚动事件