使用每個推送到數組選中的復選框值

Question

密碼筆

所以你可以看到我有復選框組，每個復選框都有價值。

我得到了以下 function 來查找選中了哪個復選框並將同一復選框的值推送到數組中，如下所示：

[“1”、“2”、“3”、“4”、“5”]

//Adding each checked checkbox to array
var left = [];
var right = [];
var all = [];
$box = $('.ppom-check-input'); //Checkbox input
$box.each(function(){ //Each checkbox
    $(this).change(function(){ //My way to figure out if got selected or not
        $('#choose').addClass('active');
        $val = $(this).val();
        $( ".all" ).click(function() {
            all.push($val);
            $('#choose').removeClass('active');
            console.log(all);
        });
        $( ".left" ).click(function() {
            left.push($val);
            $('#choose').removeClass('active');
        });
        $( ".right" ).click(function() {
            right.push($val);
            $('#choose').removeClass('active');
        });
    });
});

現在調試結果：

1. 選中一個復選框 - 數組：['1']
2. 檢查兩個復選框 - 數組：['1', '2', '2']
3. 檢查三個復選框 - 數組：['1', '2', '2', '3', '3', '3']

.right.left.all每次選中復選框時都會出現，然后您可以選擇將復選框值放入哪個數組。

我知道問題是我多次提到每個更改，我需要擺脫.change() 。

問題是，我找不到任何合適的替代代碼，我嘗試用 if 語句替換.change() function ，但沒有運氣。

如何在不重復的情況下將多個選中的復選框值推送到數組中？

Answer 1

獲取數組中選中復選框的值的最快方法是使用map()和filter()方法，如下所示：

const checked = $box.filter(':checked').map((i,c) => c.value).get();

每次您選中/取消選中復選框時， checked數組中的值都會更新。

筆記

您還沒有說以下選擇器指的是什么： .right .left .all #choose 如果前三個選擇器是復選框的附加類，那么您可以按如下方式進行：

const all = $box.filter('.all:checked').map((i,c) => c.value).get();
const left = $box.filter('.left:checked').map((i,c) => c.value).get();
const right = $box.filter('.right:checked').map((i,c) => c.value).get();

每次復選框 state 更改時，arrays 也會更新。

但是，如果這些選擇器引用了其他一些元素，則必須在問題和代碼中明確說明。 查看下面的演示：

演示

 $(document).ready(function () { $box = $('.ppom-check-input'); $box.on('change', function() { const checked = $box.filter(':checked').map((i,c) => c.value).get(); console.log( checked ); const all = $box.filter('.all:checked').map((i,c) => c.value).get(); const left = $box.filter('.left:checked').map((i,c) => c.value).get(); const right = $box.filter('.right:checked').map((i,c) => c.value).get(); console.log( all, left, right ); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" value="1" name="chk[]" class="ppom-check-input all"/> <input type="checkbox" value="2" name="chk[]" class="ppom-check-input left all"/> <input type="checkbox" value="3" name="chk[]" class="ppom-check-input right all"/> <input type="checkbox" value="4" name="chk[]" class="ppom-check-input right"/> <input type="checkbox" value="5" name="chk[]" class="ppom-check-input right all left"/>

但是，如果想法是 select 復選框，然后單擊其他元素以將選中的數字添加到相應的 arrays，則方法僅略有變化：

$('.all,.left,.right').on('click', function() {
    if( $(this).is('.all') ) {
        all = [...new Set( all.concat(checked) )];
    } else if( $(this).is('.left') ) {
        left = [...new Set( left.concat(checked) )];
    } else {
        right = [...new Set( right.concat(checked) )];
    }
    console.log( 'all',all, 'left', left, 'right', right );
});

演示

 $(document).ready(function () { let checked = [], all = [], left = [], right = []; $box = $('.ppom-check-input'); $box.on('change', function() { checked = $box.filter(':checked').map((i,c) => c.value).get(); console.log( checked ); }); $('.all,.left,.right').on('click', function() { if( $(this).is('.all') ) { all = [...new Set( all.concat(checked) )]; } else if( $(this).is('.left') ) { left = [...new Set( left.concat(checked) )]; } else { right = [...new Set( right.concat(checked) )]; } console.log( 'all',all, 'left', left, 'right', right ); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" value="1" name="chk[]" class="ppom-check-input"/> <input type="checkbox" value="2" name="chk[]" class="ppom-check-input"/> <input type="checkbox" value="3" name="chk[]" class="ppom-check-input"/> <input type="checkbox" value="4" name="chk[]" class="ppom-check-input"/> <input type="checkbox" value="5" name="chk[]" class="ppom-check-input"/> <a href="javascript:void(0)" class="all">all</a> <a href="javascript:void(0)" class="left">left</a> <a href="javascript:void(0)" class="right">right</a>

現在尋求解決方案

這就是您的代碼無法按預期工作的原因。

1. 活動

我們設置事件處理程序，通常在 DOM 就緒狀態下，以便當事件發生時，執行相關的處理程序/函數/代碼。

//Example 1
$(function() {
    $('.selector1').event1(handler1);
});

//where
function handler1() {
    //some code 1
}

example ，每次event1在.selector1上觸發時，都會調用 function handler1從而執行some code 1 。

//Example 2
$(function() {
    $('.selector2').event2(handler2);
});

//where
function handler2() {
    //some code 2
    $('.selector3').event3(handler3);
}
function handler3() {
    //some code 3
}

在example 2中，每當event2在.selector2上觸發時，都會執行some code 2 。 此外，在新的選擇器上設置了一個新的事件處理程序，這實際上導致在event3觸發時執行some code 3 。 這是什么意思？

如果event2觸發了 3 次，然后 event3 觸發了event3 ，將會發生以下情況：

• some code 2將執行 3 次
• some code 3將執行 3 次

這是您的代碼的問題。 我們很少在事件處理程序中設置事件處理程序。 所以要小心引起連鎖反應！！

2. .each()的使用

您根本不需要使用.each() ； $box = $('.ppom-check-input')已經引用了頁面上所有具有 class ppom-check-input的元素。 因此， $box.change(.....)就可以了。

Answer 2

你不需要循環：

$box.on('change', function(){
    $('#choose').addClass('active');
    $val = $(this).val();
    $( ".all" ).click(function() {
        all.push($val);
        $('#choose').removeClass('active');
        console.log(all);
    });
    $( ".left" ).click(function() {
        left.push($val);
        $('#choose').removeClass('active');
    });
    $( ".right" ).click(function() {
        right.push($val);
        $('#choose').removeClass('active');
    });
});

您可以直接在 JQuery 選擇器上調用更改事件。