Displaying checkbox values

JavaScript
1

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 -

<!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

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.

3

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

Try the following http://jsfiddle.net/wn8n3/1/, the following changed from

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

to

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

And change
var totalChecked = $(‘input[type=checkbox][class=mainlist]:checked’).length >=5
in:
var totalChecked = $(‘input[type=checkbox][class=mainlist]:checked’).length >=6 ?

6

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

7

Thanks you very much for your help chris.upjohn :slight_smile:

8

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

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.