开发者

jquery selector / checked attribute doesn't update in IE7

I have a function that's called by a link which should check various checkboxes which 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 proper way to do this using 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 a better way to do this that works in all browsers? I don't really care about un-selecting, just selecting.

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" v开发者_如何学Pythonalue="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 inline styles are a horrible idea. I'll fix that as well if I can ever get this link to work in IE.)


You could try something like this: js fiddle 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 toggle 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


Try this

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

If you use jQuery 1.6+ you can use prop

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


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

IE7 issues with my jQuery [click and change functions]


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

I don't have time to verify this ( at work :) ) but I have a sneaking suspicion this will help ie7 figure it out


In your markup, the 'HealthcareApps' div does not have a closing tag. Perhaps this is a copy/paste omission, but if it is not, then invalid markup could feasibly be the reason, especially since it's IE7 that is complaining.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜