Wie div mit Javascript verstecken/einblenden?

Question

Ich habe eine Checkbox in meiner Datei index.html als

@Html.CheckBoxFor(m=>m.isChecked, new { id = "isChecked" }) 

<div id='Shipping'> 
     <p> Some textboxes here </p> 
</div> 

Ich mag würde die nippen div auszublenden, wenn das Kontrollkästchen aktiviert ist und sichtbar machen, wenn nicht überprüft. Und ich möchte, dass es dynamisch ist. Wie mache ich das?

Answer 1

Sie müssen nur ein Ereignis an das Kontrollkästchen binden und überprüfen Sie es :checked Selektor, um festzustellen, ob das div angezeigt oder ausgeblendet werden muss.

<script> 
$().ready(function(){ 
    $('#isChecked').change(function() 
    { 
    $(this).is(":checked") ? $("#Shipping").show() : $("#Shipping").hide(); 
    }).change(); // optional 
    }); 
</script> 

Answer 2

javascript:

$('#isChecked').change(function(){ 
    if($(this).is(":checked")) { 
     $(this).removeClass("hide"); 
    } else { 
     $(this).addClass("hide"); 
    } 
}); 

css:

.hide{ display:none;} 

HTML:

<div id='Shipping' class='hide'> </div> 

Answer 3

$('#isChecked').change(function(){ 
    if($(this).is(":checked")) { 
     $("#Shipping").hide() 
    } else { 
     $("#Shipping").show() 
    } 
}); 

Answer 4

ich Sie würden zuerst binden an den Check bo erraten xs change Veranstaltung:

$('#isChecked').change(function() { 
    //... 
}); 

Innerhalb dass Event-Handler, würden Sie dann ein-/auszublenden die div basierend auf dem Zustand des Kontrollkästchens. Möglicherweise etwas in der Art:

if ($(this).is(':checked')) { 
    $('#Shipping').show(); 
} else { 
    $('#Shipping').hide(); 
} 

Natürlich möchten Sie auch einen Anfangswert festlegen. Eine einfache Möglichkeit, sowohl zu bewerkstelligen wäre wahrscheinlich die Logik in einer Funktion zu wickeln sein:

var toggleDiv = function() { 
    if ($('#isChecked').is(':checked')) { 
     $('#Shipping').show(); 
    } else { 
     $('#Shipping').hide(); 
    } 
} 

es dann von der Event-Handler aufrufen oben:

$('#isChecked').change(toggleDiv); 

Und auch wenn die Seite geladen wird:

toggleDiv();