Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jun 2009
    Posts
    138
    Thanks
    3
    Thanked 19 Times in 19 Posts

    using a HREF to check and uncheck a box

    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/

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,593
    Thanks
    0
    Thanked 645 Times in 635 Posts
    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
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,885
    Thanks
    56
    Thanked 539 Times in 536 Posts
    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:
    Code:
    $(document).ready( function() {
            $('a').click(function () {            
            var cb='#'+this.className.substr(-1); 
            $(cb).attr("checked", !$(cb).is(':checked'));
            }); 
        });

  • #4
    Regular Coder
    Join Date
    Jun 2009
    Posts
    138
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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

  • #5
    Regular Coder
    Join Date
    Jun 2009
    Posts
    138
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by xelawho View Post
    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:
    Code:
    $(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.

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

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,885
    Thanks
    56
    Thanked 539 Times in 536 Posts
    Quote Originally Posted by itxtme View Post
    Code:
    <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?

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,609
    Thanks
    6
    Thanked 997 Times in 970 Posts
    itxtme, a more general question: what is the point of you using the href attribute if it’s not referencing anything?

  • #8
    Regular Coder
    Join Date
    Jun 2009
    Posts
    138
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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

    Last edited by itxtme; 12-16-2012 at 11:54 PM.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,885
    Thanks
    56
    Thanked 539 Times in 536 Posts
    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:
    Code:
    $(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

  • #10
    Regular Coder
    Join Date
    Jun 2009
    Posts
    138
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Thanks, exactly what I am after!

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,609
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Quote Originally Posted by itxtme View Post
    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?

    Code:
    <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:
    Code:
    <label><input type="checkbox"> If this text inside the label element is clicked the checkbox will be checked/unchecked</label>
    Last edited by VIPStephan; 12-17-2012 at 01:55 AM.

  • #12
    Regular Coder
    Join Date
    Jun 2009
    Posts
    138
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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.

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,609
    Thanks
    6
    Thanked 997 Times in 970 Posts
    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).
    Last edited by VIPStephan; 12-17-2012 at 11:27 PM.

  • #14
    Regular Coder
    Join Date
    Jun 2009
    Posts
    138
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •