条件付きフィールドを表示するJqueryスクリプト

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>