隐藏div单击NO单选按钮

I solved my issue in snippet but when i using it on my website is not applying means when i click the No radio button the pro div is not closing but here in snippet is working even no errors in console. Please anyone have other solution to similar like this one. Thanks.

我在snippet中解决了我的问题，但是当我在我的网站上使用它时，我不会应用它当我点击No单选按钮时pro div不会关闭但是在snippet中，即使在控制台没有错误也能工作。请大家有类似的解决办法。谢谢。

Updated with full code: now not working here also there are two pro div should be close on No and open on YES

更新完整的代码:现在不在这里工作还有两个专业div应该在No上关闭，在YES上打开

function ShowHideDiv() {
  var chkYes = document.getElementById("chkYes");
  var pro = document.getElementsByClassName("pro");
  for (var i = pro.length - 1; i >= 0; i--) {
    pro[i].style.display = chkYes.checked ? "block" : "none";
  }
  
}

$('input[type="radio"]').change(function () {
    $(this).nextAll('.pro').toggle(this.value == 'Yes');
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
          <form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
    <div class="row">
      <div class="col-lg-6">
      
                <h4>English</h4>
              <div class="form-group">
              <label>Category:</label>
                  <select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
                    <option value=""></option>
                      <?php foreach ($getSubCat as $key => $value) {?>
                      <option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
                      <? } ?>
                  </select>
              </div>

              <div class="form-group">
                  <input class="form-control required" name="name" id="name" placeholder="Business Name">
              </div>
              <div class="form-group">
                  <input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
              </div>
              <div class="form-group">
                  <input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
              </div>
              <div class="form-group">
                  <input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
              </div>

              <div class="form-group">
                  <textarea class="form-control required" rows="3"  name="address"  id="address" placeholder="Address"></textarea>
              </div>       
          <div>
  <div class="form-group ">
      <select id="location"   class="form-control  required" name="location" >
        <option value="">Select Location</option>
        <?php
        foreach ($getLoc as $key => $value) {
          $location = $value['location_name']; ?>
            <option  value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
        <?php } ?>
      </select>
      </div>

 
      </div>

<div class="form-group">
      <div class="typediv">
          <label><input type="radio" name="type" value="1"> Free</label>
          <label><input type="radio"  name="type" value="2"> Paid</label>
          <label><input type="radio"  name="type" value="3"> Emergancy</label>
      </div>                                
  </div>
      <div class="2 box"></div>
      <div class="3 box"></div>

  <div class="form-group 2 box" style="display:none">
              
       <input type="date" class="required" name='durability' id="datepicker" value="" >
     
 
            </div>
            
            <div class="form-group isprocontactdiv">
            <label>Is Pro Contact </label>
                Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" onclick="ShowHideDiv()">
                No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
            </div>

        <div class="pro" style="display: none;" >
            <div class="form-group">
                <input class="form-control required" name="email" placeholder="Email"  >
            </div>
            <div class="form-group" >
                <input type="file" name="userfile">
            </div>
            <div class="form-group">
                <textarea class="form-control required"  id="description" name="description" rows="3" placeholder="Description" ></textarea>
            </div>
            <div class="form-group">
                <textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
            </div>
        </div>
           
    </div>
    <div class="col-lg-6">
            <h4>Marathi</h4>
            <div class="form-group">
                <input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
            </div>
            <div class="form-group">
                <input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
            </div>
            <div class="form-group">
                <textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
            </div>
            <div class="pro" style="display:none">
                <div class="form-group">
                    <textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
                </div>
                <div class="form-group">
                    <textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
                </div>
            </div>    
    </div>
    </div>
    <!-- /.row -->
     <button type="submit" class="btn btn-success">Submit</button>
            <button type="reset" class="btn btn-warring">Reset</button>
            </form>

</div>

2 个解决方案

#1

This might be your answer, ShowHideDiv() function because it is a little bit double to make a javascript function and using jQuery to do the same thing.

这可能是您的答案，ShowHideDiv()函数，因为创建javascript函数和使用jQuery做同样的事情要花费双倍的时间。

Also be careful with this

还要小心

  
$("input[name='isprocontact']").change(function () {
if(this.value == 'Yes'){
    $('.pro').show();
}else{
    $('.pro').hide();
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
          <form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
    <div class="row">
      <div class="col-lg-6">
      
                <h4>English</h4>
              <div class="form-group">
              <label>Category:</label>
                  <select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
                    <option value=""></option>
                      <?php foreach ($getSubCat as $key => $value) {?>
                      <option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
                      <? } ?>
                  </select>
              </div>

              <div class="form-group">
                  <input class="form-control required" name="name" id="name" placeholder="Business Name">
              </div>
              <div class="form-group">
                  <input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
              </div>
              <div class="form-group">
                  <input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
              </div>
              <div class="form-group">
                  <input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
              </div>

              <div class="form-group">
                  <textarea class="form-control required" rows="3"  name="address"  id="address" placeholder="Address"></textarea>
              </div>       
          <div>
  <div class="form-group ">
      <select id="location"   class="form-control  required" name="location" >
        <option value="">Select Location</option>
        <?php
        foreach ($getLoc as $key => $value) {
          $location = $value['location_name']; ?>
            <option  value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
        <?php } ?>
      </select>
      </div>

 
      </div>

<div class="form-group">
      <div class="typediv">
          <label><input type="radio" name="type" value="1"> Free</label>
          <label><input type="radio"  name="type" value="2"> Paid</label>
          <label><input type="radio"  name="type" value="3"> Emergancy</label>
      </div>                                
  </div>
      <div class="2 box"></div>
      <div class="3 box"></div>

  <div class="form-group 2 box" style="display:none">
              
       <input type="date" class="required" name='durability' id="datepicker" value="" >
     
 
            </div>
            
            <div class="form-group isprocontactdiv">
            <label>Is Pro Contact </label>
                Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" >
                No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
            </div>

        <div class="pro" style="display: none;" >
            <div class="form-group">
                <input class="form-control required" name="email" placeholder="Email"  >
            </div>
            <div class="form-group" >
                <input type="file" name="userfile">
            </div>
            <div class="form-group">
                <textarea class="form-control required"  id="description" name="description" rows="3" placeholder="Description" ></textarea>
            </div>
            <div class="form-group">
                <textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
            </div>
        </div>
           
    </div>
    <div class="col-lg-6">
            <h4>Marathi</h4>
            <div class="form-group">
                <input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
            </div>
            <div class="form-group">
                <input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
            </div>
            <div class="form-group">
                <textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
            </div>
            <div class="pro" style="display:none">
                <div class="form-group">
                    <textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
                </div>
                <div class="form-group">
                    <textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
                </div>
            </div>    
    </div>
    </div>
    <!-- /.row -->
     <button type="submit" class="btn btn-success">Submit</button>
            <button type="reset" class="btn btn-warring">Reset</button>
            </form>

</div>

#2

your question isn't really clear but if you want ide form when you click no you can process like that e.g:

你的问题不是很清楚，但是如果你想要ide表单当你点击no时你可以这样处理

var $chkNo = $('#chkNo');
var $chkYes = $('#chkYes');
var $proform = $('.pro');

$chkNo.on('click',function(){
  $proform.css('display','none') // or you can play with visibility property
});
$chkYes.on('click',function(){
  $proform.css('display','block') // or you can play with visibility property
});