Fbloggs Geekdom

Summary: Quirks of checkbox markup in HTML – differences between IE and FireFox…

Tables do not conform to the normal CSS box model as W3C explains .

A consequence of this is that you cannot use the margin property for cells or rows. Citing the above page: “Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins. (my emphasis). So, something like this:

tr.spaceme { margin-top:15px; }

does nothing.

I wanted to have a table with a ‘heading’ row followed by details, another heading row, more details, etc. So the solution is to style an empty row using the padding and/or border properties. Suppose we want to have 15 pixels of white space between the top of the next heading row. Here’s some example markup:


CSS:

<table>
<tr class="gap"><td colspan="2">&nbsp;</td></tr>
<tr><td>Customer: 1</td><td>Name: Acme</td></tr>
<tr><td>Order: foo1</td><td> Item: bar1 </td></tr>
<tr><td>Order: foo2</td><td> Item: bar2 </td></tr>
<tr class="gap"><td colspan="2">&nbsp;</td></tr>
<tr><td>Customer: 1</td><td>Name: Bolts Inc.</td></tr>
<tr><td>Order: foo3</td><td> Item: bar3 </td></tr>
<tr><td>Order: foo4</td><td> Item: bar4 </td></tr>
</table>


I don’t really like this, because it requires an unnecessary table row for each heading. My example requires a colspan, too, as I suspect in most cases tables like these will have more than one column for the headings and/or details. Anyway, I’m posting this to remind myself of this quirk in the CSS box model, as I’m bound to forget it next time I have to render tables like this.

This post explains how to set a group of checkboxes to checked or unchecked using jQuery 1.3, by clicking an “All” or “None” button.

First, let’s select our group of checkboxes. I’ve seen some fairly complicated jQuery selectors for finding checkboxes on a page, but it seems to me the easiest thing to do is just assign a common class to each one in a group, even if you don’t define the class in your stylesheets. Like this:

<input type="checkbox" class="selsts" name="selsts" value="E"> Emailed
<input type="checkbox" class="selsts" name="selsts" value="W"> Work in Progress
<input type="checkbox" class="selsts" name="selsts" value="P"> Pending client call
<input type="checkbox" class="selsts" name="selsts" value="R">R-Returned call

the jQuery selector for this is: $(".selsts") .

We could also select all the elements based on their common name, which I think goes like this: $(['name=selsts']) .
But I prefer classes, because you can easily change their names without affecting server-side code that may be dependent on form field names.

Let’s say we have two buttons on our page, using the following markup:

Select: <input type="button" id="allsts" value="All">, <input type="button" id="nosts" value="None">

To make all our checkboxes checked:

$("#allsts").click(function() {
$(".selsts").attr('checked', true);
});


To uncheck all the checkboxes:

$("#nosts").click(function() {
$(".selsts").attr('checked', false);
});


That’s it.

To determine if a checkbox is checked or not, we can loop through the array like this:

$('.selsts' ).each( function() {
var isitchecked = this.checked;
});

Or, individually:

if ($('#somecheckbox').checked == true) { blah blah ... }