CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
techhunter
techhunter

Reputation: 693

how to get the value of checkbox currently unchecked in multi select dropdown list?

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);
                         }

Upvotes: 0

Views: 4896

Answers (6)

lost_in_magento
lost_in_magento

Reputation: 693

You can use "not" for the selecion

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

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

Upvotes: 1

sabithpocker
sabithpocker

Reputation: 15566

$('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>

Upvotes: 1

techhunter
techhunter

Reputation: 693

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.

Upvotes: 0

Klemen Tusar
Klemen Tusar

Reputation: 9689

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
        }
    });
}

Upvotes: 1

ScanQR
ScanQR

Reputation: 3820

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..
            }
       });
});

Upvotes: 1

chaixxiv
chaixxiv

Reputation: 441

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

Upvotes: 1

Related Questions