Checkbox cant figure it out

HTML & CSS
1

I am creating a small javascript script which helps in creating form elements, everything is working fine except that now that I am in the section for the check-boxes they don´t behave as they should, once the code runs to create the check-boxes javasceript generates this html and places it inside the form:

<label id="somevaluel">
Some checkbox
<span>Select several</span>
<p id="somevalue">
<input type="checkbox" checked="checked" value="option_1" name="cbgroup">
<span>This is label 1</span>
<input type="checkbox" checked="checked" value="option_2" name="cbgroup">
<span>This is label 2</span>
<input type="checkbox" checked="checked" value="option_3" name="cbgroup">
<span>This is label 3</span>
<input type="checkbox" checked="checked" value="etc" name="cbgroup">
<span>This is etc label</span>
</p>
<a class="button_remove buttons" onclick="remove_field(this);return false;" href="#">
<span>Remove field</span>
</a>
<a class="button_up buttons" onclick="move_field(this, 'previous');return false;" href="#">
<span>Move up</span>
</a>
<a class="button_down buttons" onclick="move_field(this, 'next');return false;" href="#">
<span>Move down</span>
</a>
<span class="checkbox checkbox_u" onmousedown="checked_(this);"></span>
</label>

My problem is that when I click any of the generated check-boxes the first box is always checked, I noticed is because of the label tag, however because of the way the script works I would prefer not to remove the label tag, here is a link to the file showing that behavior does anyone know what I can do to overcome this problem?

2

You should be using labels instead of spans, and associating those lables with each span:

e.g.

<input type="checkbox" id="one" value="option_1" name="cbgroup">
<label for="one">This is label 1</label>
<input type="checkbox" id="two" value="option_2" name="cbgroup">
<label for="two">This is label 2</label>
<input type="checkbox" id="three" value="option_3" name="cbgroup">
<label for="three">This is label 3</label>
<input type="checkbox" id="four" value="etc" name="cbgroup">
<label for="four">This is etc label</label>
3

Although I could do that the whole set of check-boxes are wrapped inside a label, the reason I don´t want to change it is because I would need to change my css and javascript, I will do it if necessary but I like to know if there is a different aproach, for now I solved the problem by adding a hidden checkbox on top

4

With that single wrapping label lacking a FOR, and LABEL being a inline-level tag, that’s just completely wrong. LABEL cannot contain P, or DIV, or any other block level tag – NOT that the P inside it is semantically correct anyways as that is NOT a paragraph.

Semantic markup is NOT just about wrapping P around anything that happens to contain CDATA.

LABEL without “for” is wrong… Label around a block-level tag like P is wrong… P around form inputs makes no sense… and as Ralph said all those span should be LABEL as those two are wrong. The ONLY reason to use label is to associate the text inside it to a specific input – you’re not doing that.

What you have there… the LABEL looks more like it should be a FIELDSET… the “some checkbox” text being it’s LEGEND.

5

I suggest you treat this as a useful learning experience and make sure that you are using valid HTML code. The relationship between label and input is very important for a lot of reasons, and messing with those relationships causes a lot of problems—as you’ve found—not only for the browser, but for other devices like screen readers. As deathshadow60 said, there are also fieldset and legend elements that are very useful here.

6

Well I understand that it might not be right the way of doing things however I am trying to make the script work and need some pointers for it, also want to make it look nice this script will generate the code that way only for a preview, the final result will not have such problems and the way I have it setup at the moment is working for me and is making my job much easier, it displays correctly and is doing what is expected.

The reason there are spans ps and anchors is because they have ways to move the fields up and down the form, remove them or group them inside a field set; so I can´t remove them just to make it syntactically correct.

At least at the moment, having such cross browser issues, trying to make things appear the way you want them and make things do what you want them to do is a pain and have to find a way around them, I might not be right but I just don´t have a way to follow all standards, don´t know of it or have not figure it out, I might need more experience.

7

At least at the moment, having such cross browser issues,

are almost always caused by having bad/invalid/incorrect HTML, even though having correct HTML you can still have layout issues (lose lose, right?).

What you have going on is, a broken DOM being created by Javascript (Javascript also expects that you’ve followed certain rules regarding where you’ve placed “nodes”), and then each browser you are checking in is using it’s very own personal error-rendering to attempt to deal with the bad code… and so long as you are using HTML4 or XHTML1 and any browser not using the unified HTML5 parsing rules, you will never get all browsers to make the same DOM. So making everyone look and act the same is like digging a hole to China.

this script will generate the code that way only for a preview,

But you did try to click one of the checkboxes?? Are people viewing the preview just need a visual representation or is it also supposed to Do Stuff? if it’s the latter you’ll still want to have it created correctly simply because, in the end, it will (I swear) be less work for you regarding CSS and JS.

The reason there are spans ps and anchors is because they have ways to move the fields up and down the form, remove them or group them inside a field set; so I can´t remove them just to make it syntactically correct.

You can do this with regular form elements, and if you need to group more things (like, if you need to group the checkbox/span pair) you are allowed to use p’s or divs around those (I agree with Crusty that p’s aren’t the best element to use but what’s a developer to do when the W3C specs themselves show p’s as wrappers in forms?).

At least at the moment, having such cross browser issues, trying to make things appear the way you want them and make things do what you want them to do is a pain and have to find a way around them, I might not be right but I just don´t have a way to follow all standards, don´t know of it or have not figure it out, I might need more experience

Let’s do this.

First, we’d like to know what this “preview” is supposed to look like, and then what it’s supposed to do.

Then, we can help you write valid code that will create the same DOM in all browsers. Once everyone is rendering the same DOM the CSS styling will be working for everyone (likely something thuper thpecial will have to be done for our thuper thpecial friend, IE).


<label id="somevaluel">
Some checkbox
<span>Select several</span>
<p id="somevalue">
<input type="checkbox" checked="checked" value="option_1" name="cbgroup">
<span>This is label 1</span>
<input type="checkbox" checked="checked" value="option_2" name="cbgroup">
<span>This is label 2</span>
<input type="checkbox" checked="checked" value="option_3" name="cbgroup">
<span>This is label 3</span>
<input type="checkbox" checked="checked" value="etc" name="cbgroup">
<span>This is etc label</span>
</p>
<a class="button_remove buttons" onclick="remove_field(this);return false;" href="#">
<span>Remove field</span>
</a>
<a class="button_up buttons" onclick="move_field(this, 'previous');return false;" href="#">
<span>Move up</span>
</a>
<a class="button_down buttons" onclick="move_field(this, 'next');return false;" href="#">
<span>Move down</span>
</a>
<span class="checkbox checkbox_u" onmousedown="checked_(this);"></span>
</label>

What do each of those buttons do? (or, what are they exactly supposed to do?) Is someone supposed to check all applicable checkboxes and then choose one of the buttons? If they click Move down or up, does the whole label you have get moved somewhere else? Or just some of the checkboxes??

If we know what’s supposed to happen then we can show you the kind of markup your JS is supposed to create, but yeah you will need to rewrite your JS and CSS, for the reasons I listed above (that you’ll need 5 times the code to get multiple DOMs to look like they are the same).

8

The preview is just a preview and nothing else.

Yes I clicked in the check-boxes and I did it because I think the users will do that, maybe not all of them but some and, if they do, I think they expect to see no problems.

I did understand everyone’s point with this and have already tried fixing it however I don´t know if is right but it works and the check-box issue has been fixed with the changes I made.

And well, the JS generates this markup:


<div id="namel" class="basic_input_div">
<label for="name">Name:</label>
<span>Your name please.</span>
<input id="name" type="text" value="John">
<div class="button_conf">
<a onclick="removeElement('name');return false;">Remove</a>
<a onclick="moveElement('namel', 'up');return false;">Move up</a>
<a onclick="moveElement('namel', 'down');return false;">Move down</a>
<a class="checkbox checkbox_u" onclick="checkedClassChange(this);"></a>
</div>
</div>

Once processed the final markup is this:

<label for="name">Name:</label>
<span>Your name please.</span>
<input id="name" type="text" value="John">