CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Gaurav
Gaurav

Reputation: 1294

JQuery is changing checkbox value but the checkbox is not displaying as checked

I have a list with a checkbox and some text (like email's inbox). I want to check/uncheck the checkbox when i click anywhere on the list item (row). I have used following code on click event of the row:

$(this).find(".cbx input").attr('checked', true);

For first time, it show the checked checkbox. But when I click select it next time the value of checkbox checked="checked" updates in the html code (i checked through firebug) but the checkbox does not displayed as checked.

Upvotes: 40

Views: 56518

Answers (7)

Sergio
Sergio

Reputation: 2469

Easy, the solution is to use $('xxxxxx').prop('checked', true) or false Test OK in Jquery 1.11.x.

Cheers

FULL DEMO CODE EXAMPLE

Examples: (Code JavaScript checkbox for a table)

    function checkswich() {
        if ($('#checkbox-select').is(':checked') == true) {
            selectTodo();
        } else {
            deSelectTodo();
        }
    }
    function selectTodo() {
        //$('#tabla-data input.ids:checkbox').attr('checked', 'checked');
        $('#tabla-data input.ids:checkbox').prop('checked', true);
    }
    function deSelectTodo() {
        //$('#tabla-data input.ids:checkbox').removeAttr('checked', 'checked');
        $('#tabla-data input.ids:checkbox').prop('checked', false);
    }
    function invetirSelectTodo() {
        $("#tabla-data input.ids:checkbox").each(function (index) {
            //$(this).attr('checked', !$(this).attr('checked'));
            $(this).prop('checked', !$(this).is(':checked'));
        });
    }

Examples: (Code HTML checkbox for a table)

           <table id="tabla-data" class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th class="text-center" style="width: 5px"><span class="glyphicon glyphicon-check"></span></th>
                        <th>Engine</th>
                        <th><a href="#" class="">Browser</a></th>
                        <th class="td-actions text-center" style="width: 8%;">Acciones</th>
                    </tr>
                </thead>
                <tbody id="tabla-data" class="checkbox-data">
                    <tr>
                        <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td>
                        <td>#########</td>
                        <td>#######</td>
                        <td class="td-actions text-center">
                            <?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td>
                        <td>#########</td>
                        <td>#######</td>
                        <td class="td-actions text-center">
                            <?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td>
                        <td>#########</td>
                        <td>#######</td>
                        <td class="td-actions text-center">
                            <?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?>
                        </td>
                    </tr>
                </tbody>
            </table>

Example: (Code ComponentHTML use JavaScript)

<form id="form-datos" action="/url/demo/blablaaa" method="post" enctype="multipart/form-data" style="visibility: hidden;" >
<input type="hidden" name="accion" id="accion">


<div class="btn-group">
<span class="btn btn-default btn-xs"><input type="checkbox" id="checkbox-select" onclick="checkswich()"></span>
<button type="button" class="btn btn-default btn-xs dropdown-toggle dropdown-toggle-check" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Options</span>
</button>
<ul class="dropdown-menu">
    <li><a href="#" onclick="accion()">Action Demo</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#" onclick="selectTodo()">Select All</a></li>
    <li><a href="#" onclick="deSelectTodo()">UnSelet All</a></li>
    <li><a href="#" onclick="invetirSelectTodo()">Inverse Select</a></li>
</ul>

Upvotes: 2

Olmstov
Olmstov

Reputation: 593

This solution did not work for me (ie. Setting the checked state with prop).

$("#checkbox-reminder").prop("checked", true);

While the underlying state always updated correctly, the display would not properly repaint.

This can be solved with.

$("#checkbox-reminder").prop("checked", true).checkboxradio();
$('#checkbox-reminder').checkboxradio('refresh');

See this thread for more info.

Upvotes: 0

Suhas Jain
Suhas Jain

Reputation: 43

nothing initially worked for me in chrome though it was working fine in mozilla. Later found out that custom CSS styling caused the checkmark to be not visible.

Upvotes: 1

mohitesachin217
mohitesachin217

Reputation: 461

useing **.prop()** it worked for me !

$(document).on("click",".first-table tr",function(e){
if($(this).find('input:checkbox:first').is(':checked'))
{
    $(this).find('input:checkbox:first').prop('checked',false);
}else
{
    $(this).find('input:checkbox:first').prop('checked', true);
}
});

Upvotes: 1

karthickcse
karthickcse

Reputation: 1

 $("[id*='" + value + "'] input").prop('checked', false);

attr also worked (but first time only) But prop always works.

Upvotes: -1

UweB
UweB

Reputation: 4110

With .attr() you set the value of an attribute in the DOM tree. Depending on the browser, browser version and jQuery version (especially 1.6), this does not always have the desired effect.

With .prop(), you manipulate the property (in this case, 'checked state'). I strongly recommend using .prop() in your case, so the following will toggle correctly:

$(this).find(".cbx input").prop('checked', true);

For further information, please refer to the documentation of .prop().

Upvotes: 101

Rob
Rob

Reputation: 11788

Almost right, just use 'checked' instead of true:

$(this).find(".cbx input").attr('checked', 'checked');

Update: Alternatively, you can use this with newer JQuery versions:

$(this).find(".cbx input").prop('checked', true);

Upvotes: 9

Related Questions