隐藏文本框，如果jquery列表有类

指定一个通用类，使选择器变得简单

<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4 classname">

$('input.classname').toggle($('.multiselect-container li.active').length == 0);//hides input with class `classname` if `li` has `active` class
$('ul.multiselect-container').has('li.active').hide();//hides the ul if li has active class

$('.multiselect-container input:checkbox').click(function(){
  var type = $(this).data('type');
  $('.'+type).toggle(this.checked);
  $(this).closest('li').addClass('active')
});
$('.payid').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
  <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1" data-type="paypal"> Paypal</label></a></li>
  <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2" data-type="stripe"> Stripe</label></a></li>
  <li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3" data-type="bean">Beanstream</label></a></li>
</ul>
<div class="paypal payid">
  <label for="Configuration_paypalId" class="control-label">Paypal Id</label>
  <input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4">
</div>
<div class="stripe payid">
  <label for="Configuration_stripeId" class="control-label">Stripe Id</label>
  <input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4">
</div>
<div class="bean payid">
  <label for="Configuration_beanId" class="control-label">Bean Id</label>
  <input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4">
</div>

如果你可以稍微改变一下你的标记，那么你可以这样使用data-*属性:

    $('.dropdown-menu :checkbox').change(function(e) {
      var target = $(this).data('target');
      $('.' + target).toggle();
    });

.paypal, .stripe, .beanstream{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
  <li class="">
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" data-target='paypal' value="1">Paypal</label>
    </a>
  </li>
  <li class="">
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" data-target='stripe' value="2">Stripe</label>
    </a>
  </li>
  <li class="">
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" data-target='beanstream' value="3">Beanstream</label>
    </a>
  </li>
</ul>
<label for="Configuration_paypalId" class="control-label paypal">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4 paypal">
<br>
<label for="Configuration_stripeId" class="control-label stripe">Stripe Id</label>
<input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4 stripe">
<br>
<label for="Configuration_beanId" class="control-label beanstream">Bean Id</label>
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4 beanstream">

您需要向复选框应用一个"change"侦听器，然后确定它们是否被选中，并根据该信息显示/隐藏另一个元素。您确实需要一个类或id来匹配复选框的value属性。

下面的例子应该像你希望的那样工作。

$('input:checkbox').on('change', function() { // Apply change listener to checkboxes
  if ($(this).is(':checked')) { // If this checkbox is checked, show the relevant element
    $('.option' + $(this).prop('value')).show();
  } else { // Otherwise, hide the relevant element
    $('.option' + $(this).prop('value')).hide();
  }
});

.option {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
  <li>
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" value="1" />Paypal
      </label>
    </a>
  </li>
  <li>
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" value="2" />Stripe
      </label>
    </a>
  </li>
  <li>
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" value="3" />Beanstream
      </label>
    </a>
  </li>
</ul>
<div class="option option1"> <!-- The number refers to the value of the checkbox -->
  <label for="Configuration_paypalId" class="control-label">Paypal Id</label>
  <input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4">
</div>
<div class="option option2">
  <label for="Configuration_stripeId" class="control-label">Stripe Id</label>
  <input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4">
</div>
<div class="option option3">
  <label for="Configuration_beanId" class="control-label">Bean Id</label>
  <input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4">
</div>

根据更多信息更新

如果你不能编辑html，因为它是动态生成的，你需要基于索引来编辑。只有当复选框的顺序与其他输入相匹配时，这才会起作用，但如果它是动态生成的，那么我不明白为什么不应该这样。

$('input:checkbox').on('change', function() { // Apply change listener to checkboxes
  var index = parseInt($(this).prop('value')) - 1; // Make the index zero based
  if ($(this).is(':checked')) { // If this checkbox is checked, show the relevant element
    $('.control-group:eq(' + index + ')').show();
  } else { // Otherwise, hide the relevant element
    $('.control-group:eq(' + index + ')').hide();
  }
});

.control-group {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
  <li>
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" value="1" />Paypal
      </label>
    </a>
  </li>
  <li>
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" value="2" />Stripe
      </label>
    </a>
  </li>
  <li>
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" value="3" />Beanstream
      </label>
    </a>
  </li>
</ul>
<p>------------------------------</p>
<div class="control-group">
  <label for="Configuration_paypalId" class="control-label">Paypal Id</label>
  <input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4 option option1" />
  <p class="help-block">Merchant id or email of the Paypal account</p>
</div>
<div class="control-group">
  <label for="Configuration_stripeId" class="control-label">Stripe Id</label>
  <input type="text" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4 option option2" />
  <p class="help-block">Stripe id or email of the Stripe account</p>
</div>