wie Sie überprüfen, ob ein Kontrollkästchen beim Laden der Seite aktiviert ist, und wenn ja, dann ein Formular anzeigen?

Ich versuche show() ein Formular, wenn das Kontrollkästchen beim Laden der Seite aktiviert ist. Momentan zeigt meine Checkbox an, dass diese Option aktiviert ist, wenn ich die Seite aktualisiere. Aber es zeigt nicht die form bis Sie zweimal klicken, wenn Sie also auf das Kontrollkästchen klicken, wenn es das Häkchen entfernt, klicken Sie noch einmal und das Kontrollkästchen ist aktiviert und zeigt das Formular an.wie Sie überprüfen, ob ein Kontrollkästchen beim Laden der Seite aktiviert ist, und wenn ja, dann ein Formular anzeigen?

Ein weiteres Problem ist, dass ich 5 Checkbox-ID und 5 Form-Klassen habe und so habe ich 5 Funktion, die das gleiche tun. Meine Frage ist, wie kann ich eine Funktion mit 5 verschiedenen IDs arbeiten?

So gibt es zwei Fragen in einem:

1) Wie das Formular anzuzeigen ist das Kontrollkästchen aktiviert ist

2) Wie kann ich meine 5-Funktionen in einer Funktion konvertieren, die die Form nicht zeigen je auf der ID übergeben.

PS: Ich

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script> 
<script type="text/javascript" src="js/setting.js"></script>

innen <head>

Hier haben die HTML (Anmerkung: Ich werde nur eine div mit einer ID schreiben)

//This is the checkbox 
<div class="col-sm-6"> 
    <div class="form-group"> 
     <label class="switch"> 

      <input name="on_off" checked type="checkbox" id="bc1" class="switch-input on-off"> 

     <span class="switch-label" data-on="On" data-off="Off"></span> <span class="switch-handle"></span> 
     </label> 
    </div> 
    </div> 

//this is the form 
<form class="form-horizontal bc-details1" method="post" action="programs-controller.php" style="display:none" role="form"> 

    <div class="col-sm-6"> 
    <div class="form-group"> 
     <label class="control-label" >Start Date:</label> 
     <div class="input-width input-group date col-sm-10 date-picker"> 
      <input placeholder="MM/DD/YYYY" type="text" style="height:30px; font-size:14px" class="form-control " name="start_date" /> 
      <span class="input-group-addon" ><i class="glyphicon glyphicon-calendar"></i></span> 
     </div>  
    </div> 
</form>

Einstellung. js

$(document).ready(function(){ 



$('#bc1').change(function() { 

    if (this.checked) { 

    $('form.bc-details1').show(); 

} 

else { 

    $('form.bc-details1').hide(); 

} 

}); 



$('#bc2').change(function() { 

    if (this.checked) { 

    $('form.bc-details2').show(); 

} 

else { 

    $('form.bc-details2').hide(); 

} 

}); 


$('#bc3').change(function() { 

    if (this.checked) { 

    $('form.bc-details3').show(); 

} 

else { 

    $('form.bc-details3').hide(); 

} 

}); 

$('form.bc4').change(function() { 


    if (this.checked) { 

    $('form.bc-details4').show(); 

} 

else { 

    $('form.bc-details4').hide(); 

} 

}); 

$('#bc5').change(function() { 

    if (this.checked) { 

    $('form.bc-details5').show(); 

} 

else { 

    $('form.bc-details5').hide(); 

} 

}); 

});

EDIT: meine Formulare Klassen verwenden und nicht-ID ... Aber sie verschiedene ID oder Klasse verwenden, weil sie unterschiedlichen Eingang haben und Werte

Quelle

2016-03-30 JMASTER B

Try is(':checked') in dem Dokument zu nennen bereit:

$(document).ready(function() { 
    if ($('#bc').is(':checked')) { 
     $('form.bc-details1').show(); 
    } else { 
     $('form.bc-details1').hide(); 
    } 
});

und eine Funktion für verschiedenen ID Gebrauch hat dies:

$('input[type=checkbox]').change(function() { 
    var num = $(this).attr('id').match(/bc([0-9]+)/)[1]; 
    if (this.checked) { 
     $('form.bc-details' + num).show(); 
    } else { 
     $('form.bc-details' + num).hide(); 
    } 
});

und gleichen Trick für Dokument verwenden, bereit:

$(document).ready(function() { 
    function check() { 
     var $checkbox = $(this); 
     var num = $checkbox.attr('id').match(/bc([0-9]+)/)[1]; 
     if ($checkbox.is(':checked')) { 
      $('form.bc-details' + num).show(); 
     } else { 
      $('form.bc-details' + num).hide(); 
     } 
    } 
    $('input[type=checkbox]').each(check).change(check); 
});

Quelle

2016-03-30 14:52:31 jcubic

Vielen Dank für Ihre schnelle Antwort! Ich werde es jetzt versuchen. –

lol lol verdammt! Du kennst dein Zeug Mann! + 10000 lol –

Waiiittt ... Ich habe gerade ein Problem gesehen, wenn Sie das Kontrollkästchen deaktivieren, es versteckt nicht das Formular =/ –

wie Sie überprüfen, ob ein Kontrollkästchen beim Laden der Seite aktiviert ist, und wenn ja, dann ein Formular anzeigen?

Antwort

Verwandte Themen