Menu
I have a problem finding reason for the following jquery/checkbox behaviour.
$( this.obj + ' table.sgrid-content > thead > tr > th > input.select_all' ).on( 'click' , {grid:this} , function(event){ var grid = event.data.grid; if( $(this).is(':checked') ){ $( grid.obj + ' table.sgrid-content > tbody > tr > td > input.select ' ).attr('checked','checked'); $( grid.obj + ' .sgrid-content > tbody > tr > td > input.select ' ).parents('tr').addClass('ui-state-highlight'); } else { $( grid.obj + ' table.sgrid-content > tbody > tr > td > input.select ' ).removeAttr('checked'); $( grid.obj + ' table.sgrid-content > tbody > tr > td > input.select ' ).parents('tr').removeClass('ui-state-highlight'); } }); The code is intended to work as follows: - click on input.select_all triggers the event - if input.select_all is checked: add attribute checked to all checkboxes marked as .select within table.sgrid-content - if not: remove the 'checked' attribute from all input.select items.
Yet another simple grid function. And it works. The weird part is, it works only once. By that I mean, you can select all the checkboxes and deselect them. After that operation "Select all" function stops working.
Another weird thing is, when i check dom elements with firebug they all become checked='checked' attr as they should, but they display and behave as they were not checked.
Selectors work as they should. The code part with adding/removing ui-state-highlight works all the time.
Word of explenation: grid - is the object that I pass to get grid.obj ( basically ID of a ceratain div )
Please give me your opinion.
984
To check whether a Checkbox has been checked, in jQuery, you can simply select the element, get its underlying object, instead of the jQuery object ( [0] ) and use the built-in checked property: let isChecked = $('#takenBefore')[0]. checked console. log(isChecked);
Answer: Use the jQuery prop() method & :checked selector.
First, select the checkbox using a DOM method such as getElementById() or querySelector() . Then, access the checked property of the checkbox element. If its checked property is true , then the checkbox is checked; otherwise, it is not.
The :checked selector works for checkboxes, radio buttons, and options of select elements. To retrieve only the selected options of select elements, use the :selected selector.
Use prop('checked', true / false) instead of removeAttr
$('input[name=foo]').prop('checked', true); $('input[name=foo]').prop('checked', false); You can change the attribute, and that will also change the property, if the element is untouched. Once the element leaves this initial state, changing the attribute no longer affects the property. The exact behavior probably varies between browsers.
Instead of .attr('checked', 'cheked') use .prop('checked', true)
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
