チェックボックスの値に基づいて要素の可視性を変更するにはどうすればよいですか？

私はこの問題を解決しようとしています。チェックボックスをオンにすると、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>

出典

2017-03-13 dawood basharat

です試してみたい場合はlinkを試してみてください。

$(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>

出典

2017-03-13 11:19:45 Gowtham

大変よかったです。あなたは愛です！それは私の問題を解決した.. –

チェックボックスの値に基づいて要素の可視性を変更するにはどうすればよいですか？

答えて

関連する問題