Beep Beep - 20 days ago 4
HTML Question

Expand my current function to show message and change selection

Currently I have a simple JS function that if user selects 2,3,4 or 5 then 1 is un-selected or if 1 is selected then un-selected 2,3,4 and 5 and show message.

I would like to expand the script to show a new message and select 1 if more than three of the other selections are selected.

How could i expand the code to show the new message and to select "one" if more than 2 of the other options are selected ?


<input type="checkbox" class="singlecheck"/>
one <br/>

<input type="checkbox" class="multicheck"/>
two <br/>

<input type="checkbox" class="multicheck"/>
three <br/>

<input type="checkbox" class="multicheck"/>
four <br/>

<input type="checkbox" class="multicheck"/>

<div id="warning" style="display:none">Two to five can not be selected whilst you have one selected</div>

<div id="warning-two" style="display:none">you have selected more than 2 options we have defaulted you to option 1</div>


$('input[type="checkbox"]').on('click', function() {
if($(this).hasClass('singlecheck')) {
if($('input.multicheck').is(":checked")) {
$('input.multicheck').prop('checked', false);
} else {
$('input.singlecheck').prop('checked', false);


Basically, you need to count your checked 'multicheck' every time you click on one of them, which can be done like this:

if($('input.multicheck:checked').length>1) {
        $('input.singlecheck').prop('checked', true);