using a HREF to check and uncheck a box

[itxtme]

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!

Check out my fiddle http://jsfiddle.net/c4Mju/8/

[felgall]

You need to test if the checkbox is checked or not before checking it - reverse the value it currently has instead of setting it true

[xelawho]

generally not a good idea to have IDs starting with numbers, but if you were to go that way you could reduce your entire jQuery to:

$(document).ready( function() {
        $('a').click(function () {            
        var cb='#'+this.className.substr(-1); 
        $(cb).attr("checked", !$(cb).is(':checked'));
        }); 
    });

[itxtme]

I can get it to do it based on the state, however the else statement isnt working.

jsfiddle - without the else

jsfiddle with the else = fail!

Any help is much appreciated! Jquery/Javascript is not my strong point

[itxtme]

Originally Posted by xelawho

generally not a good idea to have IDs starting with numbers, but if you were to go that way you could reduce your entire jQuery to:

$(document).ready( function() {
        $('a').click(function () {            
        var cb='#'+this.className.substr(-1); 
        $(cb).attr("checked", !$(cb).is(':checked'));
        }); 
    });

I agree, I only used the numbers as examples. The actual ID's are product ID's (unique) from a DB. And so your code wont work in the sense the actual id's will be unpredictable.

<input id="124" type="checkbox" />One</br>
<input id="746" type="checkbox" />Two</br>
<input id="234" type="checkbox" />Three</br>

[xelawho]

Originally Posted by itxtme

<input id="124" type="checkbox" />One</br>
<input id="746" type="checkbox" />Two</br>
<input id="234" type="checkbox" />Three</br>

Those IDs still start with numbers.

But anyway. If you cannot tell in advance what the IDs are going to be, what is the point in trying to write a function using hardcoded IDs?

Wouldn't it be better to say that (for example) the first link refers to the first checkbox, the second to the second, etc?

[VIPStephan]

itxtme, a more general question: what is the point of you using the href attribute if it’s not referencing anything?

[itxtme]

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.

This jsfiddle gives a better representation of the products

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

Cheers

EDIT: the actual UI

[xelawho]

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:

$(document).ready( function() {
        $('a').click(function () { 
       var cb=$(':checkbox').eq($('a').index(this))
       cb.attr("checked",!cb.is(':checked'));
        });
      });

you could add class names to the selectors so that the code will not affect other links and checkboxes on the page

[itxtme]

Thanks, exactly what I am after!

[VIPStephan]

Originally Posted by itxtme

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>

[itxtme]

The reason is it is making an entire<li> item clickable, it makes it easier from a end user point of view to select or unselect the item. UI for the win.

[VIPStephan]

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).

[itxtme]

I entirely understand what you are saying, however I am using a UI framework. So to remove it would cause the secondary link to fail. Small price to pay I think