显示条件字段 onload 的 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 'medicare' 或任何复选框的 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>