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

如果您需要以动画方式使用它，请尝试此link

$(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 个答案: