Checkbox without checked attribute

Question

I have been dynamically adding checkboxes to each row within a table - datatables.net . However, when I check the boxes, the html does not show any checked attribute which then does not allow me to only focus on the rows with checked checkboxes. If I set the checkbox with the checked attribute, then yes, the checked attribute is visible. The code here shows how I'm trying to check the checked attribute...

        var filtered_rows = example_data_table._('tr', {"filter":"applied"});

        $.each(filtered_rows, function(i, el){
            // If not checked, do not include
            if(!$(el[0]).is(':checked')){
                console.log(el[0]);
                return true;
            }else{
                window.alert("HIT");
            }
         ...

and the following is how I'm appending the element to the datatables.net table...

        var checkbox = $("<input type='checkbox' 
                           id='checkbox_" + o.example_id + "' />");

        ...

        tmp = [checkbox[0].outerHTML,
        ...];
        table_data.push(tmp);

        ...

        example_data_table.fnClearTable(false);
        example_data_table.fnAddData(table_data);

In the console, all I get is this message n times:

<input type="checkbox" id="checkbox_3895">                  examples.php:189

I guess, I'm wondering why the checked attribute is never included even when I have checked the checkbox?

Answer 1

The HTML markup attribute <input checked="" is not actually designed to show the state of the element at runtime moment, but to define the default state of it when the page renders for the first time .

MDN < input > docs states:

checked:

When the value of the type attribute is radio or checkbox, the presence of this Boolean attribute indicates that the control is selected by default; otherwise it is ignored.

The only varying of checked state you can target is the Js DOM property checked :

document.getElementById('myInput').checked; //(true / false)

or the Css pseudo :checked :

#myInput:checked {
}