2016-09-29 141 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 
});