Hi I want to use a single href link to toggle the checkbox to check and uncheck. I am using Jquery and playing and adapting some code have got it so that it will check, however I cant seem to get it to uncheck unless I use another seperate href, and that is not an option!
What I am doing is pulling a dynamic list of products.
Each product has a check box that by default will be checked, instead of the user having to click on the check box I want them to be able to click on the href encasing the name of the product. Your code looks to be what I am after, however I want to just match one link to one product and toggle.
The actual jquery script code will be dynamically generated in php at page load. What I am trying to get is a piece of jquery code that will use the href unique class/id to toggle the checkbox with a matching class/id
there are various ways of doing this, particularly being that the structure of your page will be so uniform you could also do it using DOM methods like prev() and next() but this is what I was talking about:
Each product has a check box that by default will be checked, instead of the user having to click on the check box I want them to be able to click on the href encasing the name of the product.
I’m sorry but I have to ask again: what is the point of the href attribute in a link if you’re not referencing (linking to) any document? I would say: there is no point, therefore there is no point in using an anchor element in the first place.
That said, I don’t get the point of the whole thread here if all you wanna do it click on a text string and want to check/uncheck a checkbox because that’s exactly what the <label> element is doing. Why make things so complicated?
<input type="checkbox" id="example">
<label for="example">Label for the checkbox which, if clicked, will toggle the checked state thereof</label>
alternatively you can put the input inside the label element:
<label><input type="checkbox"> If this text inside the label element is clicked the checkbox will be checked/unchecked</label>
There is nothing that an anchor can do better than a label element in this case. Semantics and accessibility for the win. Oh, and CSS, too, of course, because you can style your labels to fill the entire list items. As I said, an anchor is not any better than a label here (in fact, it’s the wrong choice, even from a UI perspective).