javascript - 全部勾选触发点击或改变参数

Question

我一直在测试和研究这段代码，关于“全选”复选框。 虽然我知道如果以编程方式选中复选框， 首先调用点击处理程序，然后更改复选框状态，我需要使用更改处理程序。

我一直在使用的代码利用点击处理程序中的参数。

更改处理程序也可以使用参数吗？

下面是代码，当前通过点击处理程序传递参数。
我试过将 .click 更改为 .change，但没有效果。
在测试中，每个单独的复选框都会触发使 div 出现的功能，但“check_all”复选框不会触发它。

也可用作 fiddle .

在此感谢您的帮助。

CSS:

.toBeCompared_k {
        display: block;
}
.toBeCompared_s {
        display: block;
}
.toBeCompared_a {
        display: block;
}

.toBeCompared_new_k {
        display:inline-block;
        background:red;
        border: 1px solid black;
        margin: 2px;
        float: left;
}
.toBeCompared_new_s {
        display: inline - block;
        background: blue;
        border: 1px solid black;
        margin: 2px;
        float: left;
}
.toBeCompared_new_a {
        display: inline - block;
        background: yellow;
        border:1px solid black;
        margin:2px;
        float:left;
}

JavaScript:

$(function () {
    $("#check_all").change(function () {
        $('input:checkbox').prop('checked', this.checked);
    });
});
$(document).ready(function dynamic_boxes() {
    $(".ksa_check_k").click({
        param1: "k",
        param2: "World"
    }, cool_function);
    $(".ksa_check_s").click({
        param1: "s",
        param2: "World"
    }, cool_function);
    $(".ksa_check_a").click({
        param1: "a",
        param2: "World"
    }, cool_function);

    function cool_function(event) {
        var ksa_section = event.data.param1
        var title = $(this).closest('.ksa_check_group').find('.ksa_check_' + ksa_section).attr("id")
        //e.g. above returns ksa_on_1k1_1
        var title_partial = title.substring(nth_occurrence(title, '_', 2) + 1, nth_occurrence(title, '_', 3))
        //e.g. above returns 1k1
        if ($(this).prop('checked')) {
            var html = '<div id="' + title_partial + '"class="toBeCompared_new_' + ksa_section + '">' + title_partial + '</div>';
            $('div.toBeCompared_' + ksa_section).append(html);
            $('div.toBeCompared_' + ksa_section).show();
        } else {
            $('div[id="' + title_partial + '"]').remove();
        }
    }
});

function nth_occurrence(string, char, nth) {
    var first_index = string.indexOf(char);
    var length_up_to_first_index = first_index + 1;
    if (nth == 1) {
        return first_index;
    } else {
        var string_after_first_occurrence = string.slice(length_up_to_first_index);
        var next_occurrence = nth_occurrence(string_after_first_occurrence, char, nth - 1);
        if (next_occurrence === -1) {
            return -1;
        } else {
            return length_up_to_first_index + next_occurrence;
        }
    }
}

HTML:

<input type="checkbox" name="check_all" id="check_all">
<div class="ksa_check_group">
    <span>1k1</span><input id="ksa_on_1k1_1" class="ksa_check_k" type="checkbox" value="1" name="ksa_on_1k1_1">
</div>
<div class="ksa_check_group">
<span>1s1</span><input id="ksa_on_1s1_1" class="ksa_check_s" type="checkbox" value="1" name="ksa_on_1k1_1">
</div>
<div class="ksa_check_group">
<span>1a1</span><input id="ksa_on_1a1_1" class="ksa_check_a" type="checkbox" value="1" name="ksa_on_1k1_1">
</div>

<div class="toBeCompared_k"></div>
<div class="toBeCompared_s"></div>
<div class="toBeCompared_a"></div>

Answer 1

您需要在复选框上触发触发器

  $('*[class^="toBeCompared_new_"]').hide();
  $('*[class^="ksa_check_"]').trigger("change");

Fiddle update