CODEWITHSUNDEEP
javascriptjquerycheckboxhtml-listsdynamically-generated
nameless
nameless

Reputation: 1521

Building a list dynamically (depending on checkboxes)

I have the following question:

I have a couple of checkboxes (at the moment 11) and what I want to do now is "building" a list dynamically, depending on the value of the checkboxes, so having something like this:

A user comes, ticks a checkbox and one li is appearing, when he ticks the next one, the next li is appearing, when he ticks the next one, again one li is appearing and so on (when he unticks one of them, the li should disappear again). I'm quite sure this can work with JS, but I have no idea how to realize it.
What I have is a <ul> and all the checkboxes defined with 

<input type="checkbox" name="check_phone" id="check_phone"/>
<label for="check_phone"><span></span>Phone Number</label>

(Every checkbox has it's individual name)
What I think is going to be the biggest problem is creating the list-points dynamically, but I really hope somebody knows how to do this.

What I already thought about is just having 11 list-points in my list, all set to display:none and then just setting them to display:block when a checkbox is checked, but this will propably not work because I'm using a plugin to resort the list after this, and having 11 list-points, but just 2 visible or anything like that won't work.

Thanks for your help!

Upvotes: 0

Views: 93

Answers (3)

dannyshaw
dannyshaw

Reputation: 368

Here is a very quick demo, each time a checkbox is changed it creates all checked list items.

$(document).ready(function(){
	$('.item').on('change', function() {
		var $list = $('ul#checked').empty();

		$('.item:checked').each(function(index, item) {
			var itemName = $(item).prop('name');
            var text = $('label[for='+itemName+']').text()
			$('<li></li>')
				.text(text)
				.appendTo($list)
			;
		})

	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="item" name="check_phone" id="check_phone"/>
<label for="check_phone"><span></span>Phone Number</label>
<ul id="checked">
</ul>

Upvotes: 2

victor175
victor175

Reputation: 624

I think this will do it. You just have to set the names of the list items to be the same as their corresponding checkboxes' names.

$("input:checkbox").click(function() {
            var current = $(this),
                  linkedListCorrespondingElement = $('#list-id > li[' + current.attr('name') + ']');
            if (current.is(":checked")) {
                 linkedListCorrespondingElement.show();
            } else {
                linkedListCorrespondingElement.hide();
            }
     });

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

$("[name^='check_']").click(function(){
    $("li."+ this.name).toggle( this.checked );
});
#check_list li{ display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<label><input type="checkbox" name="check_phone"/>Phone Number</label>
<label><input type="checkbox" name="check_mobile"/>Mobile Number</label>

<ul id="check_list">
  <li class="check_phone">PHONE LI</li>
  <li class="check_mobile">MOBILE LI</li>
</ul>

Upvotes: 0

Related Questions