如何获取多选下拉列表中当前未选中的复选框的值？

Question

I am have created a multi select filter. For each of the options selected the new div element will be created with it's id is the value of checkbox selected. Till here it's working fine. But now I want to remove those div who's options(checkboxes) are un selected. I tried the below,

 if(!($(this).is(":checked"))){
      alert('is un-checked: ' + $(this).val());
   }

but it's not working. Giving value of null. Can anyone please suggest me how can I achieve this?

CODE:

                     if (window.XMLHttpRequest)
                    {
                        areq = new XMLHttpRequest();
                    } else
                    {
                        areq = new ActiveXObject("Microsoft.XMLHTTP");
                    }

                    areq.onreadystatechange = function () {
                     if ((areq.readyState == 4) && (areq.status == 200)) {
                           document.getElementById("details7").innerHTML= areq.responseText;
                      var c=areq.responseText;
                              $('.matrb').SumoSelect({
                                    triggerChangeCombined: false,
                                    okCancelInMulti: true,

                               });
                        $('.matrb').on('change', function() { 

                        if ($('option:selected', this).is(':checked')) {

      alert('is checked: ' + $(this).val()); 
     am=$(this).val(); 
     nm=$(this).find('option:selected').attr("name");
      am = am.toString().match(/\w+$/)[0];           
console.log("am is:"+c); 

   } 
   else if(!($(this).is(":checked"))){
      alert('is un-checked: ' + $(this).val());
   }

                             if (window.XMLHttpRequest)
                    {
                        breq = new XMLHttpRequest();
                    } else
                    {
                        breq = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                             breq.onreadystatechange = function () {
                     if ((breq.readyState == 4) && (breq.status == 200)) {
                         if(!( document.getElementById(am))){ 
                             var namee=document.createElement('p');
                          var newDiv=document.createElement('div');
                          newDiv.setAttribute('id', am);
                            newDiv.setAttribute("style","display:inline;");
                             namee.setAttribute("style","display:inline;");
                          var htm=breq.responseText;
                          newDiv.innerHTML=htm;
                          namee.innerHTML=nm;
                          console.log(htm);
                          console.log(newDiv);
                          document.getElementById("details8").appendChild(namee);
                             document.getElementById("details8").appendChild(newDiv);
                         }

Answer 1

Something like this perhaps:

 $('#checkboxes_container_id').find('input[type="checkbox"]')‌​.on('change', function (e) {
    $('#checkboxes_container_id').find('input[type="checkbox"]').each(function(index, element) {
        if (!$(this).is(':checked')) {
            alert('is un-checked: ' + $(this).val());
            return false; // in case you only want ONE alert
        }
    });
}

Answer 2

var uncheckedValues = $("select#id").find('option').not(':selected');
var uncheckedArray = uncheckedValues.map(function () { return this.value;}).get();
console.log(uncheckedArray);

Answer 3

$('input[type=checkbox]').not(':checked')

 $('#test').on('click', function() { console.log($('input[type=checkbox]').not(':checked').length); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <button id="test">Test</button> 

 $('input[type=checkbox]').on('change', function() { if(!this.checked){ console.log('unchecked checkbox'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <button id="test">Test</button> 

Answer 4

You can use "not" for the selecion

$('[attribute="value"]:not(":checked")').each(function() {
  alert($(this).val());
});

Check this https://jsfiddle.net/wrajesh/3ga508x3/3/

Answer 5

First of all, you need to bind change event for each checkbox so that whenever any checkbox is clicked (current one in your case) you can check if it is checked or unchecked .

$('#parent_container_selector').find('input[type="checkbox"]').each(function(index, element) {

       $(this).on('change', function(){
             //this is your current event! Grab it and do your logic here.
            if($(this).is(':checked') == false)
            {
               //delete your required elements..
            }
       });
});

Answer 6

Finally I found the solution. below is the code for that,

$('#myselect').on('change', function() {
  var $sel = $(this),
    val = $(this).val(),
    $opts = $sel.children(),
    prevUnselected = $sel.data('unselected');
  // create array of currently unselected 
  var currUnselected = $opts.not(':selected').map(function() {
    return this.value
  }).get();
  // see if previous data stored
  if (prevUnselected) {
      // create array of removed values        
      var unselected = currUnselected.reduce(function(a, curr) {
        if ($.inArray(curr, prevUnselected) == -1) {
          a.push(curr)
        }
        return a
      }, []);
      // "unselected" is an array
      if(unselected.length){
        alert('Unselected is ' + unselected.join(', '));  
      }

  }
  $sel.data('unselected', currUnselected)
}).change();

posting this because it may help someone.