Try this:
<form>
<div id="buttons">
<fieldset>
<legend>Checkbox Test</legend>
<ul>
<li>
<label for="box1">Checkbox 1:</label>
<input type="checkbox" name="box1" id="box1" value="" />
</li>
<li>
<label for="box2">Checkbox 2:</label>
<input type="checkbox" name="box2" id="box2" value="" />
</li>
<li>
<label for="box3">Checkbox 3:</label>
<input type="checkbox" name="box3" id="box3" value="" />
</li>
<li>
<label for="box4">Checkbox 4:</label>
<input type="checkbox" name="box4" id="box4" value="" />
</li>
<li>
<label for="box5">Checkbox 5:</label>
<input type="checkbox" name="box5" id="box5" value="" />
</li>
</ul>
</fieldset>
</div>
</form>
<script type="text/javascript">
$(function(){
$("#buttons").children("fieldset").append('<input type="button"
name="select_all" id="select_all" value="Select All" />');
$("#select_all").click(function(){
$(this).parents().find("div#buttons :checkbox").attr("checked",
true);
})
});
</script>
I don't know if there are any more optimizations that can be used on
the jQuery code (I've been using jQ for a little less than a week) but
this does work in FF2, IE7/8.
Kris
jez wrote:
> Hi,
> Yesterday I ran into problems with colliding namespaces on a project
> I'm working on, so I decided that while I was getting organised I'd
> try out a js library, and choose jquery. I think I made the right
> choice, but some of my scripts now do nothing in IE while still
> working in firefox.
>
> One of the scripts that doesn't work is very simple, so I'll provide
> it as an example:
>
> // select all checkboxes, add a "select all" button to buttons div
> // using standard js:
> $(document).ready(function() {
> //alert($("div.buttons").length);
> // a function to set all checkboxes to true in a form
> var select_all = function() {
> $(this)
> .parents("form")
> .find("input:checkbox")
> .attr("checked", true);
> // alert($(this));
> return false;
> };
>
> // add a button to call select_all on click
> $('<input type="button" name="select_all" value="Select All" />')
> .click(select_all)
> .appendTo($("div.buttons"));
> });
>
> That's it, hopefully a more experienced jquery user can spot any
> mistakes that might be there. Neither IE 6 nor 7 even alerts $
> ("div.buttons").length, btw.
> It could be something unrelated to jquery, but as this is the first
> time I've used it, I thought I'd check.
>
> Thanks,
> Jez Austin.
