Question

我正在使用Select2下拉列表，我的要求是选中取消选中复选框值。如果选中所有选项，则选中复选框，如果未选中所有选项，则取消选中复选框。

HTML

<select multiple id="e1" style="width:300px">
    <option value="AL">Alabama</option>
    <option value="Am">Amalapuram</option>
    <option value="An">Anakapalli</option>
    <option value="Ak">Akkayapalem</option>
    <option value="WY">Wyoming</option>
</select>
<input type="checkbox" id="checkbox" >Select All

<input type="button" id="button" value="check Selected">

JS

$("#e1").select2();
$("#checkbox").click(function(){
    if($("#checkbox").is(':checked') ){
        $("#e1 > option").prop("selected","selected");
        $("#e1").trigger("change");
    }else{
        $("#e1 > option").removeAttr("selected");
         $("#e1").trigger("change");
     }
});

$("#button").click(function(){
       alert($("#e1").val());
});

小提琴

http://jsfiddle.net/jEADR/62/。

Answer 1

您需要捕捉更改事件，当事件发生时您需要检查选择了多少选项并将它们与所有选项进行比较：

$("#e1").on("change", function(e) {

    var count = this.selectedOptions.length // how options selected
    var opt = this.length; // how options total

    if (count===opt) {
        // all selected
        $("#checkbox").prop('checked', true);
    } else {
        // not all selected
        $("#checkbox").prop('checked', false);        
    }
});

http://jsfiddle.net/jEADR/1834/

Select2触发器选中所有复选框

1 个答案: