隱藏 div 單擊 NO 單選按鈕

Question

我在代碼段中解決了我的問題，但是當我在我的網站上使用它時，當我單擊“ No 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>

Answer 2

您的問題不是很清楚，但是如果您在單擊“否”時想要 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
});