Removing from array values of checkboxes in jQuery

I have a checkboxes like this:

while($userRow=$resultForUsers->fetch_assoc()){
      $nameOfUser=$userRow['users_name'];
      $userId=$userRow['user_facebook_id'];
      $userFBPicture=$userRow['users_picture'];
      echo "
      <tr class='tr-data-users'>
      <td class='text-center'>
      <input type='checkbox' class='checkbox' onclick='if(this.checked){selo(this.value)}else{izbaci(this.value)}' value=$userId>
      </td>

So, for each user in my database I'm having one checkbox with value of his id. I need id's of all checked users(i.e checkboxes) in one array. I did it this way:

<input type='checkbox' class='checkbox' onclick='if(this.checked){put(this.value)}else{remove(this.value)}' value=$userId>
 var  niz={};
    var index=0;
        function put(o){
            niz[index++]=o;
            console.log(niz);
        }

So, console.log now displays id's of all checked checkboxes. What I want to do is if checkbox is unchecked then to remove that id(i.e chechbox value) from array. I tried it like this:

onclick='if(this.checked){put(this.value)}else{remove(this.value)}'
 var  niz={};
    var index=0;
        function put(o){
            niz[index++]=o;
            console.log(niz);
            remove(o,niz);
        }

        function remove(o,niz){
            if($.inArray(o,niz)){
                console.log('radim');
                var indexNiza= $.inArray(o,niz);
               niz= $.grep(niz,function(a,o){
                   return (a!=o);
               });
            }
        }   

As you can see this else part should handle if checkbox is unchecked and remove that id from array, but it doesn't work. Would really appreciate help on this.

Answers 1

  • It seems that the code you have written is taking a very complex route for a simple job. You can see the following for a good example on how to obtain all of the values into their own arrays for the checked and unchecked states.

    In the demonstration, I enumerate through the checked and unchecked checkboxes if the user changes the state of any checkbox, and store the checked values in an array named cbChecked and the unchecked values get stored in cbUnchecked

    The key here is the selectors used:

    Selector usage

    Get all 'checked' objects

    :checked
    

    Get all 'unchecked' objects

    :not(:checked)
    

    Demonstration

    $(document).ready(function() {
      
      $("input[type='checkbox']").change(function() {
        var cbChecked = new Array();
        var cbUnchecked = new Array();
        $("input[type='checkbox']:checked").each(function() {
          cbChecked[cbChecked.length] = this.value;            
        });
        
        $("input[type='checkbox']:not(:checked)").each(function() {
          cbUnchecked[cbUnchecked.length] = this.value;            
        });
        
        $("p#cbChecked").html( cbChecked.join() );
        $("p#cbUnchecked").html( cbUnchecked.join() );
      
      });
      
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <h2> The checkbox form</h2>
    <form id="foo">
      <p>A : <input type="checkbox" id="a" value="a"></p>
      <p>B : <input type="checkbox" id="b" value="b"></p>
      <p>C : <input type="checkbox" id="c" value="c"></p>
      <p>D : <input type="checkbox" id="d" value="d"></p>
      <p>E : <input type="checkbox" id="e" value="e"></p>
      <p>F : <input type="checkbox" id="f" value="f"></p>
    </form>
    
    <h2>Checked Values</h2>
    <p id="cbChecked"></p>
    
    <h2>Unchecked Values</h2>
    <p id="cbUnchecked"></p>


Related Articles