Проблема с чекбоксами

259

22 апреля 2017, 22:01

При отметке чекбоксов все работает правильно, но когда отмечены оба чекбокса - после снятия отметки с одного из них, исчезают все надписи

<html>
<head>
<SCRIPT TYPE="text/javascript" SRC="jquery-1.3.2.js"></SCRIPT>
<SCRIPT TYPE="text/javascript">
$(document).ready(function(){
//A1        
    $("#A1").css("display","none");
    $("#maincb1").click(function(){
    if ($("#maincb1").is(":checked")){$("#A1").show("fast");}else{$("#A1").hide("fast");}});
//B2        
    $("#B2").css("display","none");
    $("#maincb2").click(function(){
    if ($("#maincb2").is(":checked")){$("#B2").show("fast");}else{$("#B2").hide("fast");}});
//A1B2      
    $("#A1B2").css("display","none");
    $("#maincb1, #maincb2").click(function(){
    if ($("#maincb1").is(":checked") && $("#maincb2").is(":checked")){
                $("#A1B2").show("fast") && $("#A1").hide("fast") && $("#B2").hide("fast");
        }
        else{   $("#A1B2").hide("fast");
        }});
});
</SCRIPT>
</HEAD>
<body>
    <FORM ACTION="" METHOD="post">
        <!-- A1 -->                 
            <div>
                <INPUT TYPE="checkbox" id="maincb1"> A1
            </div>
        <!-- B2 -->                 
            <div>
                <INPUT TYPE="checkbox" id="maincb2"> B2
            </div>
        <!-- HIDDEN --> 
            <DIV ID="A1" STYLE="display:none;">
                <P class="tour">A1</P>
            </div>
            <DIV ID="B2" STYLE="display:none;">
                <P class="tour">B2</P>
            </div>
            <DIV ID="A1B2" STYLE="display:none;">
                <P class="tour">A1 and B2</P>
            </div>
    </FORM>
</body>
</html>

Answer 1

Добавить еще условие внутрь $("#maincb1, #maincb2").click в блок, если оба не выбраны с проверкой на то, кто останется:

$(document).ready(function() { 
  //A1         
  $("#A1").css("display", "none"); 
  $("#maincb1").click(function() { 
    if ($("#maincb1").is(":checked")) { 
      $("#A1").show("fast"); 
    } else { 
      $("#A1").hide("fast"); 
    } 
  }); 
  //B2         
  $("#B2").css("display", "none"); 
  $("#maincb2").click(function() { 
    if ($("#maincb2").is(":checked")) { 
      $("#B2").show("fast"); 
    } else { 
      $("#B2").hide("fast"); 
    } 
  }); 
  //A1B2       
  $("#A1B2").css("display", "none"); 
  $("#maincb1, #maincb2").click(function() { 
    if ($("#maincb1").is(":checked") && $("#maincb2").is(":checked")) { 
      $("#A1B2").show("fast") && $("#A1").hide("fast") && $("#B2").hide("fast"); 
    } else { 
      $("#A1B2").hide("fast");  
      if ($("#maincb2").is(":checked")) { // если остался B2 
        $("#B2").show("fast"); // покажем B2 
      } else if ($("#maincb1").is(":checked")) { // если остался A1 
        $("#A1").show("low"); // покажем A1 
      } 
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<FORM ACTION="" METHOD="post"> 
  <div> 
    <INPUT TYPE="checkbox" id="maincb1"> A1 
  </div> 
  <div> 
    <INPUT TYPE="checkbox" id="maincb2"> B2 
  </div> 
  <DIV ID="A1" STYLE="display:none;"> 
    <P class="tour">A1</P> 
  </div> 
  <DIV ID="B2" STYLE="display:none;"> 
    <P class="tour">B2</P> 
  </div> 
  <DIV ID="A1B2" STYLE="display:none;"> 
    <P class="tour">A1 and B2</P> 
  </div> 
</FORM>