[Help] Another question on Checkboxs

My current css: input[type="checkbox"]:checked + input[type="number"], input[type="checkbox"]:checked + input[type="text"], input[type="checkbox"]:checked + label, input[type="checkbox"]:checked + span { text-decoration: underline; } My current attempt at HTML <tr> <td> <input type="checkbox" name="attr_wound_treated" value="1"> <span class="label" data-i18n="wounded">Wounded</span> <input type="checkbox" name="attr_wounded" value="1"> </span> </td> </tr> What I am looking to do is on the character sheet is have checkbox (that is hidden) (attribute wound_treated) that when you click on the label wounded will Underline wounded and when you click on it again it removes the underline from wounded, but we need another checkbox (Not Hidden) that when checked is wounded and when unchecked the character is not wounded. unfortunately with my current attempt what I am getting is a visible checkbox first for wound_treated that does underline the label when checked and normal when not, but I am also getting two visible checkbox one before and after the wounded Label that represents the (attribute wounded). any help is appreciated.

I find it easier to work with classes, personally... <input class="sheet-treatwound" type="checkbox" name="attr_wound_treated" value="1"> <span class="label sheet-wounded" data-i18n="wounded">Wounded</span> <input type="checkbox" name="attr_wounded" value="1"> </span> Then your CSS would look like this: .sheet-treatwound { display: none; } .sheet-wounded { text-decoration: none; } .sheet-treatwound:checked + .sheet-wounded { text-decoration: underline; } That's untested, but should work... Edit: Oh! and you wanted the checkbox hidden...so... see the bold above...

Thank you Finderski: first I got back to this (Outer Glass on Range Oven door exploded into a thousand piece's) so wound up dealing with that all day.  tried the above how ever it is still not working right, The treatwound checkbox is hidden, but label wounded is not clickable to Underline or remove underline. and still have a checkbox before label wounded and after checkbox  (it will underline the label if you go into attributes and set wound_treated) 

Sorry...it was early and I didn't read as closely as I should have.   Try this: <input class="sheet-treatwound" type="checkbox" name="attr_wounded_treated" value="1"> <span class="label sheet-wounded" data-i18n="wounded"> <label>Wounded<input type="checkbox" class="sheet-clickable" name="attr_woundtreated" value="1" /></label> <input type="checkbox" name="attr_wounded" value="1"> </span> And the additional CSS: .sheet-treatwound { opacity: 0; } Essentially, you're making Wounded a label with an invisible checkbox that can still be clicked. It has the same name as the one in front of the span so when you click the label, the other field becomes checked as well. I'm not sure of the layout, because I'm not sure what you're going for, nor the system you're using, but this should accomplish what you want.  Clicking the label will not check the attr_wounded checkbox, which I think you wanted to be separate from the other one...

So, the above stuff doesn't work...I believe it's because of where I have the data-i18n tags (it basically removes all the stuff in there except for the translation)...to make this work, I did this... Ok, this should work for you...at least it did for me (I actually tested this one...) :) HTML: <span class="label sheet-wounded"><label class="sheet-clickablelabel"><input type="checkbox" class="sheet-clickable" name="attr_woundtreated" value="1" /><span class="sheet-shift" data-i18n="wounded">Wounded</span></label> <input type="checkbox" name="attr_wounded" value="1" /> </span> CSS: .sheet-clickable { opacity: 0; } .sheet-treatwound { display: none; } .sheet-wounded { text-decoration: none; } .sheet-clickable:checked + span { text-decoration: underline; } .sheet-clickablelabel { display: inline; } .sheet-clickablelabel:hover { cursor: pointer; } .sheet-shift { margin-left: -15px; } I gave the label a class so the mouse pointer will change when you hover over it. And I gave the span with the word wounded a class so I could shift it over 15px to the left, making the invisible checkbox be over the word.  This way you can also style the word Wound more than it currently is.

Thanks Finderski, everything is working, still have 2 checkbox's for wounded showing up one before and after the label, (I am trying to understand why)