Jquery - selector not selecting multiple checkboxes IE

Question

In IE, The selector for multiple inputs is not working whereas in firefox it is. Below is the html.

   <td><input id="contactInfo.shippingAddress.streetAddress1" name="contactInfo.shippingAddress.streetAddress1" onchange="needToConfirm = true;" type="text" value="address1" maxlength="100"/></td>


<td><input id="contactInfo.shippingAddress.city" name="contactInfo.shippingAddress.city" onchange="needToConfirm = true;" type="text" value="city" maxlength="100"/></td>
   <td ><input id="contactInfo.shippingAddress.state" name="contactInfo.shippingAddress.state" onchange="needToConfirm = true;" type="text" value="state" maxlength="100"/></td>
   <td><input id="contactInfo.shippingAddress.addressZipCode" name="contactInfo.shippingAddress.addressZipCode" onchange="needToConfirm = true;" type="text" value="123456" maxlength="10"/>
   </td>
   <td><select id="contactInfo.shippingAddress.country" name="contactInfo.shippingAddress.country" class="dropDown" onchange="needToConfirm = true;">
   </td>

and below is jquery used -

$("*[id^='contactInfo\\.shippingAddress']").val("");

Any thoughts as to where the problem might be..

Answer 1

Ok got a better solution, based on actually using input boxes, not checks :)

$('input[id^="contactInfo.shippingAddress"]').val('')

Just tested that in IE8 and it works fine.

Answer 2

Although it is a valid character, I would guess that IE doesn't like the period in the IDs. Can you change the IDs and use a hyphen or underscore instead?

EDIT: D'oh! Got it now. The selector needs to be [id^='contactInfo.shippingAddress'] with no backslashes.

In an ID selector the period needs to be escaped because it otherwise indicates a class selector. This is however a attribute selector and we're inside a string, so there is no danger of confusion with a class selector.

Your selector worked in FF (and it works in IE8 in standards mode) because jQuery then uses the browser own CSS selector engine which has no problems with the unnecessary escapes. In IE quirks mode however jQuery's selector engine Sizzle is used and that doesn't ignore them. IMO this is a Sizzle bug.