Multi Select Question

by ChrisStanyon

HTML

<div class="questionWrapper">
	<p>What Year Is It?</p>
    <input id="40" type="text" />
	<ul class="multiChoice" data-question="#40">
		<li>1913</li>
		<li>2013</li>
		<li>2113</li>
	</ul>
</div>
		
<div class="questionWrapper">
   <p>Question 2</p>
    <input id="41" type="text" />
	<ul class="multiChoice" data-question="#41">
		<li>Option1</li>
		<li>Option2</li>
		<li>Option3</li>
	</ul>
</div>

<div class="questionWrapper">
   <p>Question 3</p>
    <input id="42" type="text" />
	<ul class="multiChoice" data-question="#42">
		<li>Option1</li>
		<li>Option2</li>
		<li>Option3</li>
	</ul>
</div>

CSS

.ui-selected { color:red; }
.questionWrapper { border: 1px solid green; padding: 5px; margin: 5px; }

JavaScript

$("ul.multiChoice li").click(function() {
    $(this).toggleClass('ui-selected');
    
    var question = $(this).parent('ul');
    var selected = new Array();
    question.children('li.ui-selected').each(function() {
        selected.push($(this).text());
    });
    
    $(question.data('question')).val(selected.join('|'));
});