Jquery腳本顯示條件字段onload

Question

我有一個表單，我需要添加一些條件字段。這裏是一個鏈接上小提琴：http://jsfiddle.net/P2Ab2/59/#&togetherjs=ap7ooRf0rw

<script> 
 
jQuery(document).ready(function ($) { 
 
$('input[name="Payer Type"]').change(function() { 
 
     var val1 = $("input[name='Payer Type']:checked").val(); 
 
     if (val1 == "Medicare") { 
 
$("#Medicare_num").show("slow"); 
 
     } else { 
 
$("#Medicare_num").hide("slow");  } 
 

 
}); 
 

 
$('input[name="Payer Type"]').change(function() { 
 
     var val1 = $("input[name='Payer Type']:checked").val(); 
 
     if (val1 == "Medicaid") { 
 
$("#Medicaid_num").show("slow"); 
 
     } else { 
 
$("#Medicaid_num").hide("slow");  } 
 

 
}); 
 

 
// 
 
$('input[name="Payer Type"]').change(function() { 
 
     var val1 = $("input[name='Payer Type']:checked").val(); 
 
     if (val1 == "Commercial Insurance") { 
 
$("#Comm_name, #Comm_policy_num").show("slow"); 
 
     } else { 
 
$("#Comm_name, #Comm_policy_num").hide("slow"); 
 
     } 
 
}); 
 

 

 
// 
 

 
}); 
 
</script>

<form> 
 
    <table border="0" cellpadding="1" cellspacing="1" style="width: 750px;"> 
 
    <tbody> 
 
     <tr> 
 
     <td style="width: 381px;">Please Select Payer Type:</td> 
 
     <td colspan="3" style="width: 340px;"> 
 
      <input name="Payer Type" type="checkbox" value="Medicare" />Medicare&nbsp; 
 
      <input name="Payer Type" type="checkbox" value="Medicaid" />Medicaid&nbsp; 
 
      <input name="Payer Type" type="checkbox" value="Commercial Insurance" />Commercial Insurance</td> 
 
     </tr> 
 
     <tr> 
 
     <td style="width: 381px;">&nbsp;</td> 
 
     <td colspan="3" style="width: 340px;"> 
 
      <input id="Medicare_num" name="Medicare Num" placeholder="Medicare ID#" type="text" /> 
 
      <input id="Medicaid_num" name="Medicaid Number" placeholder="Medicaid ID #" type="text" /> 
 
      <input id="Comm_name" name="Commercial Insurance Name" placeholder="Commercial Insurance Name" size="50" type="text" /> 
 
      <input id="Comm_policy_num" name="Commercial Insurance Number" placeholder="Policy #" type="text" /> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</form>

現在，我有工作，除了一兩件事：所有的條件文本字段顯示的時候了。我希望它僅在選中複選框時才顯示。

Answer 1

首先，你應該給複選框不同的名字，此刻，因爲它們都具有相同的名稱/ ID不能區分它們，之後你可以看到，如果一個複選框被選中：

if $('#' + id).is(":checked") { 
    //show textbox 
} 

作爲id'醫療保險'或任何複選框的ID。在負載上運行if語句，然後只有在複選框被選中時才顯示文本框。

Answer 2

綁定一個更改事件處理程序，並通過使用attribute starts with selector選擇元素進行切換。

jQuery(document).ready(function($) { 
 
    // bind event handler to the checkbox 
 
    $('input[name="Payer Type"]').change(function() { 
 
    // get input element where name attribute is starts with the checkbox value 
 
    // and then toggle the visibility based on the checked property 
 
    $('input[name^="' + this.value + '"]').toggle(this.checked); 
 
    // trigger the change event 
 
    }).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <table border="0" cellpadding="1" cellspacing="1" style="width: 750px;"> 
 
    <tbody> 
 
     <tr> 
 
     <td style="width: 381px;">Please Select Payer Type:</td> 
 
     <td colspan="3" style="width: 340px;"> 
 
      <input name="Payer Type" type="checkbox" value="Medicare" />Medicare&nbsp; 
 
      <input name="Payer Type" type="checkbox" value="Medicaid" />Medicaid&nbsp; 
 
      <input name="Payer Type" type="checkbox" value="Commercial Insurance" />Commercial Insurance</td> 
 
     </tr> 
 
     <tr> 
 
     <td style="width: 381px;">&nbsp;</td> 
 
     <td colspan="3" style="width: 340px;"> 
 
      <input id="Medicare_num" name="Medicare Num" placeholder="Medicare ID#" type="text" /> 
 
      <input id="Medicaid_num" name="Medicaid Number" placeholder="Medicaid ID #" type="text" /> 
 
      <input id="Comm_name" name="Commercial Insurance Name" placeholder="Commercial Insurance Name" size="50" type="text" /> 
 
      <input id="Comm_policy_num" name="Commercial Insurance Number" placeholder="Policy #" type="text" /> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</form>