2016-09-29 85 views
1

我解决我的问题摘录股利点击,但在使用它在我的网站我不施加装置,当我点击Noradio按钮pro div不打烊,但这里摘录的工作,甚至没有错误在控制台中。 请任何人有类似这样的其他解决方案。谢谢。隐藏在NO单选按钮

更新了全码: 现在不在这里工作也有两个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>

+0

不工作兄弟....是js序列的问题吗?因为在这个页面有很多脚本 –

+0

你需要显示你正在面临的问题的代码.. – Rayon

+0

与完整的代码?可能不会有很多这种形式的页面..你可以给它替代解决方案吗? –

回答

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>

+0

伟大的工作..你可以告诉我上面的代码错误? –

+0

只有当值为yes时,你才更改div来显示块,当值设置为no时,它不会执行任何功能,因此它不会再次隐藏。 此外,你有一个jQuery的功能,并做一个正常的JavaScript函数,试图做同样的事情。 – Wesley

0

你的问题是不是真的清楚,但如果你想IDE形式当你点击任何你能处理这样的例如:

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 
});