如何根据已选中或未选中复选框添加/删除项目？

Question

I have written below lines of code

 var selectedFinal = []; //On click check all records $(document).on("click", "#completebatch,.commoncheckbox", function() { var checkBoxCount = 0; var selected = []; $("#selected_students").empty(); $('#studentListBody input:checked').not(".disabled-check").each(function() { var id = $(this).val(); if ($("#" + id).is(":checked")) { checkBoxCount++; selected.push(id); } else { checkBoxCount--; selected.pop(id); } }); $("#allStudentIds").val($.unique(selected)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <th><input onclick="checkenabledisable()" id="completebatch" type="checkbox"></th> </thead> <tbody> <tr> <td><input class="commoncheckbox disabled-check" value="578" type="checkbox" disabled=""></td> <td>abc</td> </tr> <tr> <td><input class="commoncheckbox" value="357" type="checkbox"></td> <td>abc</td> </tr> <tr> <td><input class="commoncheckbox" value="123" type="checkbox"></td> <td>abc</td> </tr> </tbody> </table> 

I have created html table with checkboxes, where user can uncheck or check the checkboxes. Based on checked or unchecked checkboxes I am trying to push the id's (value) of the checked checkboxes in the "selected" array. The above code is not adding the value of that checkbox. Also When I try to uncheck the checkbox that id is not removed from the "selected" array. Please help!!!

Answer 1

Why don't simply use map() and get() on the checked check boxes:

 var selectedFinal = []; //On click check all records $(document).on("click", "#completebatch,.commoncheckbox", function () { selectedFinal = $('.commoncheckbox:checked').map((i,el) =>{ return $(el).attr('value') }).get(); console.log(selectedFinal); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <th><input onclick="checkenabledisable()" id="completebatch" type="checkbox"></th> </thead> <tbody> <tr> <td><input class="commoncheckbox disabled-check" value="578" type="checkbox" disabled=""></td> <td>abc</td> </tr> <tr> <td><input class="commoncheckbox" value="357" type="checkbox"></td> <td>abc</td> </tr> <tr> <td><input class="commoncheckbox" value="123" type="checkbox"></td> <td>abc</td> </tr> </tbody> </table> 

Answer 2

Please try executing the following script:

 <tbody>
<tr>
  <td><input class="commoncheckbox disabled-check"  id = "checkbox1" value="578" type="checkbox" onclick="check(this.id);" disabled=""></td>
 <td>abc</td>
</tr>
<tr>
  <td><input class="commoncheckbox" value="357"  id = "checkbox2" onclick="check(this.id);" type="checkbox"></td>
  <td>abc</td>
</tr>
<tr>

  <td><input class="commoncheckbox" value="123" id = "checkbox3"  onclick="check(this.id);" type="checkbox"></td>
  <td>abc</td>
</tr>
    </tbody>
  </table>



<script>
selected = [];
function check(a){
    if(document.getElementById(a).checked = true){
        selected.push(document.getElementById(a).value); 
    }

}

Answer 3

I fix as well your code on this jsfiddle:

http://jsfiddle.net/xpvt214o/792746/

// find elements
var selectedFinal = [];
$( document ).ready(function() {
             //On click check all records

                var checkBoxCount = 0;
                var selected = [];


                $('input:checkbox.commoncheckbox').not(".disabled-check").change(function (event) {

                    var target = event.target;
                    if ($(target).is(":checked"))
                    {
                        checkBoxCount++;
                        selected.push(target.value);
                    } 
                    else
                    {
                        checkBoxCount--;
                        selected.pop(target.value);
                    }
                    console.log('selected', selected)
                });

                $("#allStudentIds").val($.unique(selected));

           });