Get checkbox state in array with javascript or jquery

Question

I have on a devexpress grid one column with a checkbox. It is a simple checkbox column, which depends on which checkbox is checked I need to invoke different methods, it is not bind to a property from model.

I need to know which row is selected. I have tried to resolve this with this javascript code:

if (document.getElementById('selectDamage').checked) {
        alert("checked");
        var checkedValues = $('input:checkbox:checked').map(function () {
            return this.value;
        }).get();
        console.log(checkedValues);
        } else {
            alert("You didn't check it! Let me check it for you.");
        }

This returns only the checked values. I need to return something like Array{on, off, on}, the first is checked, the second one is unchecked and the last is checked. Is there a way in javascript or jquery to do that?

do your checkboxes all share the same id? i.e. selectDamage? They should be unique. — Napoli
– Napoli, Commented Apr 30, 2018 at 10:05
You can create an static array when the table is generated with the default status of the row's checkbox and then add a function on the onChange event of the checkbox and in that function just set the property of checkbox's checked by $('<checkboxid or object>').prop('checked'). to the array position. And in order to get the rownumber you can use this $('checkbox').closest('tr').index(). — vikscool
– vikscool, Commented Apr 30, 2018 at 10:09

Sumit k · Accepted Answer · 2018-05-17 10:48:48Z

first add checkbox in grid then take a button and set onclick function of this button , then all checked data will go through array and finally split the array value and do your further job.(array value are saved into hidden field, i used hidden field and set the id lblarr )

                      <dx:GridViewDataColumn >
                            <HeaderTemplate>

                            </HeaderTemplate>
                            <DataItemTemplate>                                   

                                <input type="checkbox" class="case" id="chkchild" name="checkboxModel" value='<%#Eval("SALE_DOC_#") %>' />
                            </DataItemTemplate>
                        </dx:GridViewDataColumn>


<script>
                  $('#btn1').click(function () {
                 var CheckCount =$('input:checkbox[name="checkboxModel"]:checked').length;
                 if (CheckCount > 0) 
                  {
               var valuesArray = 
        $('input:checkbox[name="checkboxModel"]:checked').map(function () {

                        return this.value;

                    }).get().join(","); 

                    $('#<%=lblarr.ClientID%>').val(valuesArray);                       

                }              
                else {

                    alert('Please check at least one data!')

                }
            })

</script>

Napoli · Accepted Answer · 2018-04-30 10:14:42Z

1

Depending on the layout of your html, you could do something like this to get an updated array of indexed checked states

var els = $("table#gvDamages3_DXMainTable input[type=checkbox]");
els.on("change", function(){
    var vals = [];
    els.each(function() {
        vals.push(this.checked);
    });

    console.log(vals);
});

answered Apr 30, 2018 at 10:14

Napoli

1,4032 gold badges17 silver badges26 bronze badges

Collectives™ on Stack Overflow

Get checkbox state in array with javascript or jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related