如何檢查頁面加載時是否選中了復選框，如果選中，則顯示表單？

Question

我正在嘗試show()表單，如果頁面加載時該復選框已選中。 目前，我的復選框的確顯示刷新頁面時已選中。 但是，它只有在您單擊兩次后才會顯示該form ，因此，如果在未選中它的情況下單擊該復選框，則再單擊一次就會選中該復選框並顯示該表單。

另一個問題是我有5個復選框ID和5個表單類，因此我有5個函數做同樣的事情。 我的問題是，如何使一個函數可以使用5個不同的ID？

因此，有兩個問題合而為一：

1）如何顯示表格被選中的復選框

2）如何將我的5個函數轉換為一個函數，該函數根據傳遞的ID確實顯示表格。

PS：我有

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

內<head>

這是HTML（注意：我將只發布一個ID為1的div ）

//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>

setting.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();

}

});

});

編輯：我的表單使用的是類而不是ID ...但是，它們必須使用不同的ID或類，因為它們具有不同的輸入和值

Answer 1

嘗試在准備就緒的文檔中調用is(':checked') ：

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

並具有一個用於不同id的函數，請使用以下命令：

$('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();
    }
});

並使用相同的技巧准備文檔：

$(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);
});

如何檢查頁面加載時是否選中了復選框，如果選中，則顯示表單？

問題描述

1 個解決方案

解決方案1
2 已采納 2016-03-30 14:52:31

如何檢查頁面加載時是否選中了復選框，如果選中，則顯示表單？

問題描述

1 個解決方案

解決方案1 2 已采納 2016-03-30 14:52:31

解決方案1
2 已采納 2016-03-30 14:52:31