SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Displaying checkbox values

    Hi guys,

    I'm trying to display the values of different checkboxes in a div and then beside the values there is an X which when clicked deletes the value from the list. So far I've managed to do all this, however when the user clicks on the X I can't get the checkbox related to the value to uncheck?

    This is what i've got so far -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"
            type="text/javascript"></script>
    <style type="text/css">
    a, a:active, a:visited {
        color: red;
    }
    </style>
    
    </head>
    
    <body>
    <input type="checkbox" class="mainlist" value="test"/>
    <input type="checkbox" class="mainlist" value="test2"/>
    <input type="checkbox" class="mainlist" value="test3"/>
    <input type="checkbox" class="mainlist" value="test4"/>
    <input type="checkbox" class="mainlist" value="test5"/>
    <input type="checkbox" class="mainlist" value="test6"/>
    <div id="results"></div>
    
    <script type="text/javascript">
    
    
      $(":checkbox").change(function() {
             if(this.checked) {
            $('#results').append('<div><a href="#" class="item">X</a> ' + $(this).val() + '</div>');
            
           };
        }); 
        $(document).on('click','.item',function(){
            $(this).parent().remove();
                $("input.mainlist").attr("checked", false);
        });
    
    
    $("input[type=checkbox][class=mainlist]").click(function() {
    
      var unt = $("input[type=checkbox][class=mainlist]:checked").length >= 5;     
        $("input[type=checkbox][class=mainlist]").not(":checked").attr("disabled",unt);
    
    });
    
    </script>
    
    </body>
    
    </html>
    Also I want to limit the amount of checked checkboxes to 5 - which i've also managed to do by disabling the remaining checkboxes.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You could use the checkbox indexes to create a 1:1 relationship with the X which will work regardless but if the DOM changes before them this will of course break the index numbers so maybe wrap them in a DIV which will allow them to retain a 0-5 index range and so on, see the following jsFiddle for an example using your existing code.

    http://jsfiddle.net/wn8n3/

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    You could use the checkbox indexes to create a 1:1 relationship with the X which will work regardless but if the DOM changes before them this will of course break the index numbers so maybe wrap them in a DIV which will allow them to retain a 0-5 index range and so on, see the following jsFiddle for an example using your existing code.

    http://jsfiddle.net/wn8n3/
    Thanks you very much! Works great.

    I've just got one more problem with this - when 5 checkboxes are selected the remaining one is disabled, but when you click the X it remains disabled (even though there is less then 5 checked)? Any suggestions?

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try the following http://jsfiddle.net/wn8n3/1/, the following changed from

    Code javascript:
    $('input[class=mainlist]:eq(' + $child.data('cb') + ')').prop('checked', false);
    to
    Code javascript:
    $('input[class=mainlist]:eq(' + $child.data('cb') + ')').prop('checked', false).trigger('change');

  5. #5
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    And change
    var totalChecked = $('input[type=checkbox][class=mainlist]:checked').length >=5
    in:
    var totalChecked = $('input[type=checkbox][class=mainlist]:checked').length >=6 ?


  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Francky View Post
    And change
    var totalChecked = $('input[type=checkbox][class=mainlist]:checked').length >=5
    in:
    var totalChecked = $('input[type=checkbox][class=mainlist]:checked').length >=6 ?

    He only wanted 5 checkboxes to be checked at any given time.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks you very much for your help chris.upjohn

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    You could use the checkbox indexes to create a 1:1 relationship with the X which will work regardless but if the DOM changes before them this will of course break the index numbers so maybe wrap them in a DIV which will allow them to retain a 0-5 index range and so on, see the following jsFiddle for an example using your existing code.

    http://jsfiddle.net/wn8n3/
    I've been attempting to implement the new code which you have provided, but I'm having a few problems. I understand that you mentioned wrap them in a DIV to allow them to retain a 0-5 index range. However, I don't think it would be possible with my current project. Each individual checkbox is wrapped in a DIV and then put into an unordered list. But of course when I do this the code no longer works...

    Sorry to be asking for help again but I can't figure this one out.

    I've made up a small example of how the checkboxes should be positioned and what is currently happening here

    Thanks

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    In that case you could use data attributes to assign a reference to the checkboxes, see the following link for how you would implement this. Essentially it's an attribute such as data-ref="1" that you set on the checkbox then you can use jQuery to get the value by using the data() method which I've already been using in the previous examples.

    http://jsfiddle.net/wn8n3/8/


Bookmarks

Posting Permissions

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