CODEWITHSUNDEEP
javascriptjquerycheckbox
wolverene
wolverene

Reputation: 255

How to show divs with checkboxes and uncheck other checkboxes with other checkbox

Hi very new to javascript here and jquery and absolutely don't know what I'm doing. I have 4 checkboxes. 1 to 4. I need to have 1 and 2 checkboxes when either or both are checked shows hidden #div1 and unchecks checkboxes 3 and 4 (if they are checked) and hides div2 if shown. Then 3 and 4 checkboxes when either or both checked shows hidden #div2 and unchecks checkboxes 1 and 2 (if they are checked) and hides div1 if shown.

Here's my html without any javascript. tried some but i'm just not too good with it.

<html>
<head>
<style type="text/css">
<!--
.divstyle
{
    display: none;
    border: 1px solid #000;
    height: 100px;
    width: 200px;
    margin: 10px 0 0 0;
}
-->
</style>
</head>
<body>
<p>
<input name="chk1" type="checkbox" id="chk1"/> 
Group1 Black
<input name="chk2" type="checkbox" id="chk2"/>
Group1 White
<input name="chk3" type="checkbox" id="chk3"/>
Group2 Red
<input name="chk4" type="checkbox" id="chk4"/>
Group2 Blue</p>
<div class="divstyle" id="div1">This is Group 1 for Black and White</div>
<div class="divstyle" id="div2">This is Group 2 for Red and Blue</div>
</body>
</html>

I hope I'm making sense here.

Can you guys help? Thanks in advance.

Upvotes: 1

Views: 1326

Answers (3)

jumperchen
jumperchen

Reputation: 1473

Here is the complete example,

<html>
<head>
<style type="text/css">
<!--
.divstyle
{
    display: none;
    border: 1px solid #000;
    height: 100px;
    width: 200px;
    margin: 10px 0 0 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#chk1, #chk2').click(function() {
            var show;
          $('#chk1, #chk2').each(function () {
            if ($(this).attr("checked")) {
                show = true;
                $('#div1').show();
                $('#div2').hide();
                $('#chk3, #chk4').attr("checked", false);
            }
          });
          if (!show)
            $('#div1').hide();
        });
        $('#chk3, #chk4').click(function() {
            var show;
          $('#chk3, #chk4').each(function () {
            if ($(this).attr("checked")) {
                show = true;
                $('#div1').hide();
                $('#div2').show();
                $('#chk1, #chk2').attr("checked", false);
            }
          });
          if (!show)
            $('#div2').hide();
        });
    });
</script>
</head>
<body>
<p>
<input name="chk1" type="checkbox" id="chk1"/> 
Group1 Black
<input name="chk2" type="checkbox" id="chk2"/>
Group1 White
<input name="chk3" type="checkbox" id="chk3"/>
Group2 Red
<input name="chk4" type="checkbox" id="chk4"/>
Group2 Blue</p>
<div class="divstyle" id="div1">This is Group 1 for Black and White</div>
<div class="divstyle" id="div2">This is Group 2 for Red and Blue</div>
</body>
</html>

Upvotes: 1

sunki
sunki

Reputation: 673

<html>
<head>
  <style type="text/css">
    <!--
    .divstyle
    {
      display: none;
      border: 1px solid #000;
      height: 100px;
      width: 200px;
      margin: 10px 0 0 0;
    }
    .hidden {
      visibility: hidden;
      position: absolute;
    }
    -->
  </style>
</head>
<body>
<p>
  <input name="chk1" type="checkbox" id="chk1" class="first"/>
  Group1 Black
  <input name="chk2" type="checkbox" id="chk2" class="first"/>
  Group1 White
  <input name="chk3" type="checkbox" id="chk3" class="second"/>
  Group2 Red
  <input name="chk4" type="checkbox" id="chk4" class="second"/>
  Group2 Blue
</p>
<div class="divstyle" id="div1">This is Group 1 for Black and White</div>
<div class="divstyle" id="div2">This is Group 2 for Red and Blue</div>
<script type="text/javascript">
  $('input').live("click", function () {
    var reset_class;
    var show_id;
    var hide_id;
    switch (this.className) {
      case 'first':
        reset_class = 'second';
        show_id = 'div1';
        hide_id = 'div2';
        break;
      case 'second':
        reset_class = 'first';
        show_id = 'div2';
        hide_id = 'div1';
    }
    $('.' + reset_class).attr('checked', false);
    $('#' + show_id).removeClass();
    $('#' + hide_id).addClass('hidden');
  });
</script>
</body>
</html>

Upvotes: 1

Mark Coleman
Mark Coleman

Reputation: 40863

This should work for you:

$("#chk1, #chk2").click(function(){
    $("#chk3, #chk4").removeAttr("checked");
    $("#div1").show();
    $("#div2").hide();
});
$("#chk3, #chk4").click(function(){
    $("#chk1, #chk2").removeAttr("checked");
    $("#div2").show();
    $("#div1").hide();
});

Simply register a .click() handler to your checkboxes targeted by id. Use .removeAttr() to uncheck the other boxes. Then use .show() and .hide() to display the correct div.

Code example on jsfiddle

Upvotes: 2

Related Questions