如何根據復選框的值更改元素可見性？

Question

我正在嘗試解決這個問題。 如果選中我的復選框，則應顯示一個div。 在我的表單中，我有很多復選框按鈕，但是現在我要在一個復選框上實現它，這是我的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>

Answer 1

如果您需要動畫方式，請嘗試此鏈接

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

 <!DOCTYPE html> <html> <head> <script data-require="jquery@3.1.1" 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>

如何根據復選框的值更改元素可見性？

問題描述

1 個解決方案

解決方案1
0 已采納 2017-03-13 11:19:45

如何根據復選框的值更改元素可見性？

問題描述

1 個解決方案

解決方案1 0 已采納 2017-03-13 11:19:45

解決方案1
0 已采納 2017-03-13 11:19:45