Geek Answers Handbook

In IE7, the jquery selector / checked attribute is not updated

I have a function called by a link that should check the various flags that exist inside a specific div (passed to the function). Works in all browsers except IE (7.) As far as I can tell .attr ('checked', 'checked' is the right way to do this with jquery 1.5.1

function selectall(industry){ $("#"+industry+"Apps :checkbox").attr('checked', 'checked'); $("#"+industry+"Apps :checkbox").change(); /* used for jqtransform plugin */ }

Is there something I'm missing, or is there a better way to do this that works in all browsers? I don’t care what you don’t choose, just choose.

HTML looks like

 <div id = 'HealthcareApps'> <div style="clear: both;"> <a href = "javascript:selectall('Healthcare');">Select all</a> </div> <ul> <li><label for="id_Healthcare_0"><input type="checkbox" name="Healthcare" value="1" id="id_Healthcare_0" /> Simple Messaging</label></li> <li><label for="id_Healthcare_1"><input type="checkbox" name="Healthcare" value="2" id="id_Healthcare_1" /> Mobile Alerts and Alarms</label></li> <li><label for="id_Healthcare_2"><input type="checkbox" name="Healthcare" value="3" id="id_Healthcare_2" /> Patient Identification / Drug Conflicts</label></li> </ul>

(yes, I know that inline styles are a terrible idea. I will fix this if I can ever get this link to work in IE.)

+4
source share
5 answers

You can try something like this: js sciddle demo

 <div id = 'HealthcareApps'> <div style="clear: both;"> <a href="#" id="selectall" class="Healthcare" >Select all</a> </div> <ul> <li><label for="id_Healthcare_0"><input type="checkbox" name="Healthcare" value="1" id="id_Healthcare_0" /> Simple Messaging</label></li> <li><label for="id_Healthcare_1"><input type="checkbox" name="Healthcare" value="2" id="id_Healthcare_1" /> Mobile Alerts and Alarms</label></li> <li><label for="id_Healthcare_2"><input type="checkbox" name="Healthcare" value="3" id="id_Healthcare_2" /> Patient Identification / Drug Conflicts</label></li> </ul> </div>

jquery:

 $('#selectall').click(function(e) { e.preventDefault(); var industry = $(this).attr("class"); $("#" + industry + "Apps :checkbox").attr('checked', 'checked'); });

And to turn it on and off:

 $('#selectall').click(function(e) { e.preventDefault(); var industry = $(this).attr("class"); var checkbox = $("#" + industry + "Apps :checkbox"); checkbox.attr('checked', !checkbox.attr('checked')); });

js fiddle toggle demo

+1
source

try it

 function selectall(industry){ $("#"+industry+"Apps :checkbox").attr('checked', true); $("#"+industry+"Apps :checkbox").change(); /* used for jqtransform plugin */ }

If you are using jQuery 1.6+, you can use prop

 $("#"+industry+"Apps :checkbox").prop('checked', true);
0
source

Try using click () instead of change (). This seems to be an IE7 bug:

Problems with IE7 with my jQuery [click and change functions]

0
source

try $("#"+industry+"Apps input:checkbox").attr('checked', 'checked');

I don’t have time to check it (at work :)), but I have a secret suspicion, it will help ie7 understand this

0
source

There is no end tag in your markup in the HealthcareApps element. Perhaps this is an exception for copy / paste, but if it is not, then the reason may be incorrect markup, especially since it complains about IE7.

0
source

More articles:


All Articles