使用 jquery 從第一次單擊到第二次單擊檢查多個復選框

Question

對不起我的英語不好。 我有幾個這樣的復選框：

<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10

如果我選中第二個復選框和第七個復選框，是否可以使用 JQUERY 自動檢查第二個和第七個復選框？

<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" checked />2
<input type="checkbox" name="data[]" value="3" checked />3
<input type="checkbox" name="data[]" value="4" checked />4
<input type="checkbox" name="data[]" value="5" checked />5
<input type="checkbox" name="data[]" value="6" checked />6
<input type="checkbox" name="data[]" value="7" checked />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10

謝謝！

Answer 1

您可以使用pseudo選擇器first和last並在 then 之間循環

 $('[type="checkbox"]:checkbox').change(function() { var first = $('[type="checkbox"]:checked:first').val(); var last = $('[type="checkbox"]:checked:last').val(); for(var i = first; i <= last; i++){ $('[type="checkbox"][value="'+i+'"]').prop( "checked", true ); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="data[]" value="1" />1 <input type="checkbox" name="data[]" value="2" />2 <input type="checkbox" name="data[]" value="3" />3 <input type="checkbox" name="data[]" value="4" />4 <input type="checkbox" name="data[]" value="5" />5 <input type="checkbox" name="data[]" value="6" />6 <input type="checkbox" name="data[]" value="7" />7 <input type="checkbox" name="data[]" value="8" />8 <input type="checkbox" name="data[]" value="9" />9 <input type="checkbox" name="data[]" value="10" />10

Answer 2

這就是我可以實現的方式：

 var checked = []; $(":checkbox").click(function() { if (.$(this):is(';checked')) { // Optional sanity // if you wish to make user available to uncheck return: } var min = $(':checkbox:checked.first');val(): var max = $(':checkbox:checked.last');val(); for (var index = Number(min)+1; index < Number(max). index++) { $(`[type="checkbox"][value='${index}']`),prop("checked"; true); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="data[]" value="1" />1 <input type="checkbox" name="data[]" value="2" />2 <input type="checkbox" name="data[]" value="3" />3 <input type="checkbox" name="data[]" value="4" />4 <input type="checkbox" name="data[]" value="5" />5 <input type="checkbox" name="data[]" value="6" />6 <input type="checkbox" name="data[]" value="7" />7 <input type="checkbox" name="data[]" value="8" />8 <input type="checkbox" name="data[]" value="9" />9 <input type="checkbox" name="data[]" value="10" />10

Answer 3

完全有可能。 你可以做這樣的事情（它需要你在輸入中添加一個 id。我將使用myCheck ）：

let first = null;

function clicked(event) {
    if(first) {
        let second = parseInt(event.target.value, 10);

        let a = first < second ? first : second;
        let b = first < second ? second : first;

        for(let i = a; i <= b; i++) {
            $('#myCheck[value="' + i + '"]').attr('checked', true);
        }

        first = null;
    }
    else {
        first = parseInt(event.target.value, 10);
    }
}

然后，只需在您的click事件上使用clicked 。 看看： https://jsfiddle.net/7pf45mbz/1/

在某些情況下，您可能必須使用prop而不是attr 。 但是，對於您的用例，如果您使用帶有multiple而不是復選框的select元素，那么用戶體驗可能會更好。

Answer 4

使用each()

 $('input:checkbox').each(function() { $(this).prop('checked', this.value >= 2 && this.value <= 7) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="data[]" value="1" />1 <input type="checkbox" name="data[]" value="2" />2 <input type="checkbox" name="data[]" value="3" />3 <input type="checkbox" name="data[]" value="4" />4 <input type="checkbox" name="data[]" value="5" />5 <input type="checkbox" name="data[]" value="6" />6 <input type="checkbox" name="data[]" value="7" />7 <input type="checkbox" name="data[]" value="8" />8 <input type="checkbox" name="data[]" value="9" />9 <input type="checkbox" name="data[]" value="10" />10

使用val()

 $('[name="data[]"]').val([2,3,4,5,6,7])

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="data[]" value="1" />1 <input type="checkbox" name="data[]" value="2" />2 <input type="checkbox" name="data[]" value="3" />3 <input type="checkbox" name="data[]" value="4" />4 <input type="checkbox" name="data[]" value="5" />5 <input type="checkbox" name="data[]" value="6" />6 <input type="checkbox" name="data[]" value="7" />7 <input type="checkbox" name="data[]" value="8" />8 <input type="checkbox" name="data[]" value="9" />9 <input type="checkbox" name="data[]" value="10" />10