How to get value of unchecked checkboxes on click?

Question

I want to get value of single checkbox when it is checked and unchecked.. I am currently working on codeigniter FW. I am getting the value of checkbox when clicked on it, but i am not able to get the value of unchecked box when clicked. please help me out!! My code is below.

    <table>
    <thead>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>
            <input name="feature" type="checkbox" id="10" value="10" />
          </td>

          <td>
            <input name="feature" type="checkbox" id="11" value="11" />    
          </td>

          <td>
            <input name="feature" type="checkbox" id="12" value="12" />    
          </td>

          <td>
            <input name="feature" type="checkbox" id="13" value="13" />    
          </td>
        </tr>
    </tbody>    
</table>



<script type="text/javascript">
    $("input:checkbox").change(function() {
        var someObj = {};
        someObj.fruitsGranted = [];
        var feature , key;

        $("input:checkbox").each(function() {
            if ($(this).is(":checked")) {
                key = someObj.fruitsGranted.push($(this).attr("feature"));
                someObj.fruitsGranted.push($(this).attr("id"));
                feature = $(this).attr("id");
                //key = $(this).attr("feature");
            } 
        });

        alert("GRANTED: " + feature + " ok " + key);
    });
</script>

Your code attempt doesn't seem to match your requirement. `$("input:checkbox").change(function() { if (!$(this).is(":checked") { $(this).attr("id") ... ` — freedomn-m, Oct 15 '19 at 13:08
By adding the `$("input:checkbox").each(`, you're key/feature will always be from the last checkbox. Remove the `.each` and use `$(this).is(":checked")` to see if the current one is ticked. — freedomn-m, Oct 15 '19 at 13:09
@freedomn-m thankyou for your comment but i need to get value of checkbox when it is unchecked.. currently i get value when it is checked!. — Shreyas Heda, Oct 15 '19 at 13:18
I'm not sure the difference. `change` is fired for both check/uncheck and `this` will be the checkbox - so `$(this).val()` is the value and the link and comments above show whether it is checked or not. — freedomn-m, Oct 15 '19 at 13:31

Bilal Siddiqui · Accepted Answer · 2019-10-15T13:28:50.057

change function will be executed for current checkbox check/uncheck. So you may extract that info before your each function

$("input:checkbox").change(function() {
    var someObj = {};
    someObj.fruitsGranted = [];
    var feature , key;
    // you may extract all info from $(this) here on check/uncheck
    alert("Checked " + $(this).is(":checked"));
    // your rest code
});

You are probably trying to acheive something like cart. Simplify your logic

// Declare data variables outside
var someObj = {};
someObj.fruitsGranted = [];

// register event for all checkboxes
$("input:checkbox").change(function() {
    var feature , key;
    if ($(this).is(":checked")) {
        // get key/value and push into declared object's array
        // alert if needed : alert("GRANTED: " + feature + " ok " + key);
    } else {
        // on uncheck
        // get key/value and remove from object's array
       // alert if needed : alert("REVOKED: " + feature + " ok " + key);
    }
});

score 0 · Answer 2 · answered Oct 15 '19 at 13:25

For finding the unchecked checkbox value you can try this

<script type="text/javascript">
    $("input:checkbox").change(function() {
        var someObj = [];
        $("input:checkbox").each(function() {
            console.log($(this).prop('checked'));
            if ($(this).prop('checked') === false) {
                someObj.push({feature:$(this).attr('id'),key:$(this).val()});
            } 
        });
        console.log(someObj);
    });
</script>

How to get value of unchecked checkboxes on click?

2 Answers2