check box if select one un-select all other

Question

Ok, so i have a list of check boxes 1, 2, 3, 4 and 5. I would like the function to select 2, 3, 4 and 5 but if 1 is selected then un-select 2, 3, 4 and 5, once 2 to 5 are un-selected display a message in a div.

So far I can select 1 and one of the others... and the message comes on selection of 1

problem 1 I cant un-select 2 to 5 once 1 is selected

problem 2 The message is displayed on page load even if the box is un-selected.

HTML

 <input type="checkbox" class="" value="checkbox" name="CheckboxGroup1" id="boxchecked"  />
one <br/>

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

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

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

<input type="checkbox" class="check" />
five

<div id="hidden">Two to five can not be selected whilst you have one selected</div>

JavaScript

$('input.check').on('change', function() {
    $('input.check').not(this).prop('checked', false);  
});

$(document).ready(function(){
  $("#boxchecked").click(function ()
  {
      if ($("#boxchecked").is(':checked'))
      {
          $("#hidden").show();
      }
      else
      {
          $("#hidden").hide();
      }              
  });
});

$('input[name=CheckboxGroup1]').attr('checked', false);

Answer 1

What you can do is that you can disable the checkboxes 2-5 as soon as the checkbox 1 is checked and then show the message. If one is not checked your can enable the other checkboxes and hide the message as:

 $('input[type="checkbox"]').on('change', function(){ if($('#boxchecked').prop('checked')) { $('.check').attr('disabled', true); $('#hidden').show(); } else { $('.check').removeAttr('disabled'); $('#hidden').hide(); } }) 

 #hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="" value="checkbox" name="CheckboxGroup1" id="boxchecked" /> one <br/> <input type="checkbox" class="check" /> two <br/> <input type="checkbox" class="check" /> three <br/> <input type="checkbox" class="check" /> four <br/> <input type="checkbox" class="check" /> five <div id="hidden">Two to five can not be selected whilst you have one selected</div> 

Answer 2

Here is what I propose. How about giving the checkbox that can only be singly checked a class, and the others another class?
Hope it helps.

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="singlecheck" value="one" name="CheckboxGroup1" id="boxchecked" /> one <br/> <input type="checkbox" class="multicheck" value="two"/> two <br/> <input type="checkbox" class="multicheck" value="three"/> three <br/> <input type="checkbox" class="multicheck" value="four"/> four <br/> <input type="checkbox" class="multicheck" value="five"/> five <div id="warning" style="display:none">Two to five can not be selected whilst you have one selected</div> 

Answer 3

To un-select check box 2-5, you can use something like this:

$('input[name="CheckboxGroup1"]').on('click', function() {
  if ($(this).is(":checked")) {
    $('input.check').prop('checked', false);
  }
})

For message to be hidden initially, you can have an initialization function that will set/reset UI states to default

function initUI() {
  $('input[name=CheckboxGroup1]').attr('checked', false);
  $('#hidden').hide();
}

Sample Fiddle

Also, for cases where you have if...else to toggle visibility of a field, you should use .toggle(VisibilityValue)

$("#boxchecked").click(function() {
  $("#hidden").toggle($("#boxchecked").is(':checked'))
});

Updated Fiddle

Answer 4

i think you want this type fuctionality :

jQuery

var box = null;

$(document).ready(function() {

    $(".check").click(function() {


        box = this.id;

        $(".check").each(function() {
            if ( this.id == box )
            {
                this.checked = true;
                //$("#hidden").show();
                var cval =$(this).val();
                document.getElementById("get").innerHTML =cval;
            }
            else
            {
                this.checked = false;

            };        
        });
    });    
});

HTml Code

<input type="checkbox" class="check" value="one" name="CheckboxGroup1" id="one"  />
one <br/>

<input type="checkbox" class="check" id="two" value="two"   />
two <br/>

<input type="checkbox" class="check" id="three" value="three"   />
three <br/>

<input type="checkbox" class="check"  id="four" value="four"  />
four <br/>

<input type="checkbox" class="check" id="five" value="five"  />
five

<div id="hidden">This checkbox number is <label id="get">0</label></div>

I hope its usefull for you