阵列无法正常运作

Question

When selecting a checkbox there are no values on my array. If you select multiple checkboxes sometimes it stored values. Mostly the last checkbox value stored on array. The purpose of this is to filter data from country and categories so I need to pull out Country and Category checkbox value and submit it as a post on a php file.

var selectedFilter = new Array();
        var selectedFilterCat = new Array();
        $('.filter-check').change(function(){
            
            $('.country').each(function(){
                if($(this).is(':checked')){
                    selectedFilter.push(  $(this).val() )   
                    /*console.log(selectedFilter);*/
                }else{
                    var index = selectedFilter.indexOf( $(this).val() )
                    /*console.log(index)*/
                    selectedFilter.splice(index, 1 )
                }
            })
                $('.category').each(function(){
                if($(this).is(':checked')){
                    selectedFilterCat.push(  $(this).val() )    
                }else{
                    var indexcat = selectedFilterCat.indexOf( $(this).val() )
                    /*console.log(index)*/
                    selectedFilterCat.splice(indexcat, 1 )
                }
            })
            
            
        
        console.log(selectedFilter);
        console.log(selectedFilterCat);
            
            //Ajax  
            var a = JSON.stringify(selectedFilter);
            var b = JSON.parse(a);
            var c = JSON.stringify(selectedFilterCat);
            var d = JSON.parse(c);
            $.ajax({
              method: "GET",
              url: "/wjo/call-job-list.php",
              data: { filter: b },
              success: function(result){
                $("#joblistings").html(result);
            }
            })
            
        })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
    <ul>
    <li>
    <label class=" container-check">Australia
        <input class="filter-check country" type="checkbox" name="country" value="Australia">
    </label>
    </li>
    
    <li>
    <label class=" container-check">United Kingdom
        <input class="filter-check country" type="checkbox" name="country" value="United Kingdom">
    </label>
    </li>
    
    <li>
    <label class=" container-check">USA
        <input class="filter-check country" type="checkbox" name="country" value="USA">
    </label>
    </li>
    
    <li>
    <label class=" container-check">New Zealand
        <input class="filter-check country" type="checkbox" name="country" value="New Zealand">
    </label>
    </li>
    </ul>
    </div>
    <div id="navcontainer1">
    <ul>
    <li>
    <label class=" container-check">Vineyard / Viticulture
        <input class="filter-check category" type="checkbox" name="country" value="Vineyard / Viticulture">
    </label>
    </li><li>
    <label class=" container-check">Winemaking / Lab / Production
        <input class="filter-check category" type="checkbox" name="country" value="Winemaking / Lab / Production">
    </label>
    </li><li>
    <label class=" container-check">Harvest / Vintage 
        <input class="filter-check category" type="checkbox" name="country" value="Harvest / Vintage">
    </label>
    </li>
    <li>
    <label class=" container-check">Cellar Door
        <input class="filter-check category" type="checkbox" name="country" value="Cellar Door">
    </label>
    </li>
    <li>
    <label class=" container-check">General Management
        <input class="filter-check category" type="checkbox" name="country" value="General Management">
    </label>
    </li>
    <li>
    <label class=" container-check">Sales / Marketing / Retail / Distributor
        <input class="filter-check category" type="checkbox" name="country" value="Sales / Marketing / Retail / Distributor">
    </label>
    </li>
    </ul>
    </div>

</div>

Answer 1

Before splice you need to add condition for checking index value Also, I have added array value inside loop

        $('.filter-check').change(function(){

            var selectedFilter = new Array(); // UPDATED
            var selectedFilterCat = new Array(); // UPDATED

            $('.country').each(function(){
                if($(this).is(':checked')){
                    selectedFilter.push(  $(this).val() )   
                    /*console.log(selectedFilter);*/
                }else{
                    var index = selectedFilter.indexOf( $(this).val() )
                    /*console.log(index)*/
                    
                    if(index >= 0) // ADDED
                    selectedFilter.splice(index, 1 )
                }
            })
                $('.category').each(function(){
                if($(this).is(':checked')){
                    selectedFilterCat.push(  $(this).val() )    
                }else{
                    var indexcat = selectedFilterCat.indexOf( $(this).val() )
                    /*console.log(index)*/
                    if(indexcat >= 0)      // ADDED
                    selectedFilterCat.splice(indexcat, 1 )
                }
            })
            
            
        
        console.log(selectedFilter);
        console.log(selectedFilterCat);
            
            //Ajax  
            var a = JSON.stringify(selectedFilter);
            var b = JSON.parse(a);
            var c = JSON.stringify(selectedFilterCat);
            var d = JSON.parse(c);
            $.ajax({
              method: "GET",
              url: "/wjo/call-job-list.php",
              data: { filter: b },
              success: function(result){
                $("#joblistings").html(result);
            }
            })
            
        })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
    <ul>
    <li>
    <label class=" container-check">Australia
        <input class="filter-check country" type="checkbox" name="country" value="Australia">
    </label>
    </li>
    
    <li>
    <label class=" container-check">United Kingdom
        <input class="filter-check country" type="checkbox" name="country" value="United Kingdom">
    </label>
    </li>
    
    <li>
    <label class=" container-check">USA
        <input class="filter-check country" type="checkbox" name="country" value="USA">
    </label>
    </li>
    
    <li>
    <label class=" container-check">New Zealand
        <input class="filter-check country" type="checkbox" name="country" value="New Zealand">
    </label>
    </li>
    </ul>
    </div>
    <div id="navcontainer1">
    <ul>
    <li>
    <label class=" container-check">Vineyard / Viticulture
        <input class="filter-check category" type="checkbox" name="country" value="Vineyard / Viticulture">
    </label>
    </li><li>
    <label class=" container-check">Winemaking / Lab / Production
        <input class="filter-check category" type="checkbox" name="country" value="Winemaking / Lab / Production">
    </label>
    </li><li>
    <label class=" container-check">Harvest / Vintage 
        <input class="filter-check category" type="checkbox" name="country" value="Harvest / Vintage">
    </label>
    </li>
    <li>
    <label class=" container-check">Cellar Door
        <input class="filter-check category" type="checkbox" name="country" value="Cellar Door">
    </label>
    </li>
    <li>
    <label class=" container-check">General Management
        <input class="filter-check category" type="checkbox" name="country" value="General Management">
    </label>
    </li>
    <li>
    <label class=" container-check">Sales / Marketing / Retail / Distributor
        <input class="filter-check category" type="checkbox" name="country" value="Sales / Marketing / Retail / Distributor">
    </label>
    </li>
    </ul>
    </div>

</div>