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

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

provide entire code and not only some code. show us what you have tried — ScanQR, Dec 05 '16 at 08:49
Possible duplicate of [JQuery check if checkbox is NOT checked](http://stackoverflow.com/questions/11440128/jquery-check-if-checkbox-is-not-checked) — roberrrt-s, Dec 05 '16 at 08:51
@Roberrrt I am not checking for checkboxes which are lying unchecked. Each time i uncheck , I want to get the value corresponding checkbox. — techhunter, Dec 05 '16 at 08:58

Klemen Tusar · Answer 1 · 2016-12-05T09:39:13.153

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

edited Dec 05 '16 at 09:39

answered Dec 05 '16 at 08:51

Klemen Tusar

9,261
4
31
28

Thanks for response. I want only the value of currently unchecked checkbox. – techhunter Dec 05 '16 at 08:55
Well yea, this should get you the values of all unchecked checkboxes. If you simply want the 1st one you can simply terminate the loop iteration on the 1st condition hit. – Klemen Tusar Dec 05 '16 at 08:59
Not for firs one. By default all the checkboxes are unchecked. user can check and uncheck any of them. – techhunter Dec 05 '16 at 09:04
1

Well then bind this code to a trigger like: `$('#checkboxes_container_id').find('input[type="checkbox"]').on('change', function (e) { do_stuff(); })` – Klemen Tusar Dec 05 '16 at 09:08

score 1 · Answer 2 · answered Dec 05 '16 at 08:54

1

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

answered Dec 05 '16 at 08:54

chaixxiv

421
4
6

While this answer may solve the problem, please try not to copy/paste code. Instead explain what the code does and why it is relevant to the OP. – Nahuel Ianni Dec 05 '16 at 09:42

sabithpocker · Answer 3 · 2016-12-07T07:46:09.960

1

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

edited Dec 07 '16 at 07:46

answered Dec 05 '16 at 08:57

sabithpocker

15,274
1
42
75

Good answer. but i wan the value of checkbox each time it is unchecked.(only one checkbox value) – techhunter Dec 05 '16 at 09:07
That would be really easy, you just have to add event listeners and get the target. – sabithpocker Dec 05 '16 at 13:02
Mouse events aren't available cross browser – techhunter Dec 06 '16 at 16:57
You can use `change` event, should be supported in all browsers supporting checkbox, and look for `!this.checked` inside event handler to make sure uncheck happened right now. – sabithpocker Dec 07 '16 at 07:43

lost_in_magento · Answer 4 · 2016-12-21T14:24:31.210

1

You can use "not" for the selecion

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

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

edited Dec 21 '16 at 14:24

answered Dec 05 '16 at 09:08

lost_in_magento

703
8
22

Sorry jQuery was not added in the fiddle.. You can check now – lost_in_magento Dec 07 '16 at 07:06

score 1 · Answer 5 · answered Dec 05 '16 at 09:10

1

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

answered Dec 05 '16 at 09:10

ScanQR

3,740
1
13
30

tried. But if($(this).is(':checked') == false){ alert( $(this).val()); } is null. – techhunter Dec 05 '16 at 10:12
@safoorasafu then it means your checkboxes dont have any values defined. because you do get into if block on checkbox change event. – ScanQR Dec 05 '16 at 10:19
Thanks for above answer. But it has value.and passing the value as id for next div i have generated new content. but now i want to delete the div when checkbox having corresponding value is un selected. for this i need the value of checkbox. – techhunter Dec 05 '16 at 12:04

score 0 · Answer 6 · answered Dec 06 '16 at 16:59

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.

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

6 Answers6