показать DIV и скрыть другой DIV с помощью флажка

Question

мне нужно, чтобы скрыть и показать div1div2 когда checkbox1 проверяется

я использовал ниже код, но он не работает

<script type="text/javascript"> 
    function valueChanged() { 
     if ($('.checkbox1').is(":checked")) 
      $(".div2").show(); 
     else 
      $(".div1").hide(); 
    } 
</script> 

Html

<input type="checkbox" name="checkbox1" onchange="valueChanged()" /> 
<div class="row" id="div1">Show Div 1</div> 
<div class="row" id="div2" style="display: none">Show Div 2</div> 

Answer 1

Вместо этого вы можете просто использовать toggle()

function valueChanged() { 
 
    $('.row').toggle(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="checkbox1" onchange="valueChanged()" /> 
 
<div class="row show" id="div1">Show Div 1</div> 
 
<div class="row" id="div2" style="display: none">Show Div 2</div>

Answer 2

0 Вы можете задать нам вопрос (ы) с помощью следующей формы.

<script type="text/javascript"> 
    function valueChanged() { 
     if ($(this).is(":checked")) 
      $("#div2").show(); 
     else 
      $("#div1").hide(); 
    } 
</script> 

Answer 3

Если вы хотите сохранить его JS на основе ваша логика не совсем верно. Исправления ниже:

HTML Update:

<input id="checkbox1" type="checkbox" name="checkbox1" onchange="valueChanged()"> 
<div class="row" id="div1">Show Div 1</div> 
<div class="row" id="div2" style="display: none;">Show Div 2</div></div> 

Javascript:

<script type="text/javascript"> 
    function valueChanged() { 
     if ($("#checkbox1").is(":checked")) { 
      $("#div2").show(); 
      $("#div1").hide(); 
     } else { 
      $("#div1").show(); 
      $("#div2").hide(); 
     } 
    } 
</script> 

Если вы хотите сделать это только с CSS вместо того, чтобы добавить класс или идентификатор с флажком, а также и использовать ~ селектор. Вы также захотите удалить встроенный дисплей none на div2.

#div2 { display:none; } 
#checkbox:checked ~ #div1 { display:none; } 
#checkbox:checked ~ #div2 { display:block; } 

Answer 4

Неправильный код. Это должно быть так:

function valueChanged() { 
 
    if ($('#checkbox1').is(":checked")) { 
 
    $("#div1").hide(); 
 
    $("#div2").show(); 
 
    } else { 
 
    $("#div1").show(); 
 
    $("#div2").hide(); 
 
    } 
 
} 
 

 
// OR you could just use toggle() 
 
function valueChanged2() { 
 
    $('.row').toggle(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<input type="checkbox" id="checkbox1" onchange="valueChanged()" /> 
 
<div class="row" id="div1">Show Div 1</div> 
 
<div class="row" id="div2" style="display: none">Show Div 2</div>