javascript - 隐藏 div 单击 NO 单选按钮

Question

我在代码片段中解决了我的问题，但是当我在我的网站上使用它时，当我单击否 radio按钮时，pro div 没有关闭，但即使在控制台中没有错误，代码片段也可以正常工作。请任何人有其他类似的解决方案。谢谢。

更新了完整代码:现在在这里不起作用，还有两个 pro 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>

Answer 1

这可能是您的答案，ShowHideDiv() 函数，因为制作一个 javascript 函数并使用 jQuery 做同样的事情有点双重。

也要小心这一点

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