javascript - how to get the value of checkbox currently unchecked in multi select dropdown list? - Stack Overflow

admin管理员组

文章数量:1021127

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

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

• javascript
• jquery
• html
• checkbox

Share Improve this question Follow edited Dec 5, 2016 at 8:53 techhunter asked Dec 5, 2016 at 8:47 techhuntertechhunter 69311 gold badge1212 silver badges2727 bronze badges 5

• 1 provide entire code and not only some code. show us what you have tried – ScanQR Commented Dec 5, 2016 at 8:49
• Possible duplicate of JQuery check if checkbox is NOT checked – roberrrt-s Commented Dec 5, 2016 at 8:51
• updated @TechBreak – techhunter Commented Dec 5, 2016 at 8:54
• @Roberrrt I am not checking for checkboxes which are lying unchecked. Each time i uncheck , I want to get the value corresponding checkbox. – techhunter Commented Dec 5, 2016 at 8:58
• @safoorasafu please try my answer – ScanQR Commented Dec 5, 2016 at 9:21

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

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

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

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

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

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

<script src="https://ajax.googleapis./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./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>

You can use "not" for the selecion

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

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

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.

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

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

• javascript
• jquery
• html
• checkbox

Share Improve this question Follow edited Dec 5, 2016 at 8:53 techhunter asked Dec 5, 2016 at 8:47 techhuntertechhunter 69311 gold badge1212 silver badges2727 bronze badges 5

• 1 provide entire code and not only some code. show us what you have tried – ScanQR Commented Dec 5, 2016 at 8:49
• Possible duplicate of JQuery check if checkbox is NOT checked – roberrrt-s Commented Dec 5, 2016 at 8:51
• updated @TechBreak – techhunter Commented Dec 5, 2016 at 8:54
• @Roberrrt I am not checking for checkboxes which are lying unchecked. Each time i uncheck , I want to get the value corresponding checkbox. – techhunter Commented Dec 5, 2016 at 8:58
• @safoorasafu please try my answer – ScanQR Commented Dec 5, 2016 at 9:21

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

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

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

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

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

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

<script src="https://ajax.googleapis./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./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>

You can use "not" for the selecion

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

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

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.

本文标签： javascripthow to get the value of checkbox currently unchecked in multi select dropdown listStack Overflow