チェックボックスの値に基づいて要素の可視性を変更するには?

debugcn 投稿 Dev

ダウッド・バシャラット

私はこの問題を解決しようとしています。チェックボックスをオンにすると、div が表示されます。私のフォームには多くのチェックボックスボタンがありますが、今は1つのチェックボックスに実装したいのですが、ここに私のJavaScriptコードがあります

//$('#check1').click(function(){
document.getElementById('check1').checked
    if (this.checked) {
        document.getElementsByClassName('rbc-none1').style.display="block";
    }
//})

HTMLコード

<h2 class="rbc-none" style="display:none">Building cleaning</h2>
            <div class="rbc-none" style="display:none">
                <div class="col-md-12"><h4>Building cleaning</h4></div> 
                <div class="col-md-6 col-sm-6">
                        <div class="form-group options">
                            <strong>Interior</strong>
                            <label class="switch-light switch-ios pull-right">
                                <input type="checkbox" name="option_6" id="option_6" value="Yes">
                                <span>
                                <span>No</span>
                                <span>Yes</span>
                                </span>
                                <a></a>
                            </label>
                        </div>
                  </div>     
                <div class="col-md-6 col-sm-6">
                        <div class="form-group options">
                            <strong>Exterior</strong>
                            <label class="switch-light switch-ios pull-right">
                                <input type="checkbox" name="option_7" id="option_7" value="Yes">
                                <span>
                                <span>No</span>
                                <span>Yes</span>
                                </span>
                                <a></a>
                            </label>
                        </div>
                        </div>
                <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                        <label>Measurment </label>
                       <input type="text" class="form-control"  />
                   </div> 
                    </div>

チェックボックスのhtml

<label class="switch-light switch-ios pull-right">
                            <input type="checkbox" name="option_5" id="check1" value="Yes">
                            <span>
                            <span>No</span>
                            <span>Yes</span>
                            </span>
                            <a></a>
                        </label>

ゴーサム

アニメーション形式で必要な場合は、このリンクを試してください

$(document).ready(function () {
    $('#check1').change(function () {
        if (!this.checked) 
        //  ^
           $('.rbc-none').hide();
        else 
            $('.rbc-none').show();
    });
});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <label class="switch-light switch-ios pull-right">
      <input type="checkbox" name="option_5" id="check1" value="Yes" />
      <span>
        <span>No</span>
        <span>Yes</span>
      </span>
      <a></a>
    </label>
    <h2 class="rbc-none" style="display:none">Building cleaning</h2>
    <div class="rbc-none" style="display:none">
      <div class="col-md-12">
        <h4>Building cleaning</h4>
      </div>
      <div class="col-md-6 col-sm-6">
        <div class="form-group options">
          <strong>Interior</strong>
          <label class="switch-light switch-ios pull-right">
            <input type="checkbox" name="option_6" id="option_6" value="Yes" />
            <span>
              <span>No</span>
              <span>Yes</span>
            </span>
            <a></a>
          </label>
        </div>
      </div>
      <div class="col-md-6 col-sm-6">
        <div class="form-group options">
          <strong>Exterior</strong>
          <label class="switch-light switch-ios pull-right">
            <input type="checkbox" name="option_7" id="option_7" value="Yes" />
            <span>
              <span>No</span>
              <span>Yes</span>
            </span>
            <a></a>
          </label>
        </div>
      </div>
      <div class="col-md-6 col-sm-6">
        <div class="form-group">
          <label>Measurment </label>
          <input type="text" class="form-control" />
        </div>
      </div>
    </div>
  </body>

</html>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]