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

Question

当在 UL > LI 中找到活动的类时，我如何隐藏文本框

当我应该显示它的标签和文本框时，它应该被隐藏。我正在尝试获取选定复选框的值并将其隐藏但无法到达那里。

$('ul.multiselect-container').has('li.active').css('display', 'none');

<ul class="multiselect-container dropdown-menu">
    <li class="active"><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1"> Paypal</label></a>

    </li>
    <li class="active"><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2"> Stripe</label></a>

    </li>
    <li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3">Beanstream</label></a>

    </li>
</ul>
<label for="Configuration_paypalId" class="control-label">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4">
<br>
<label for="Configuration_stripeId" class="control-label">Stripe Id</label>
<input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4">
<br>
<label for="Configuration_beanId" class="control-label">Bean Id</label>
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4">

更新

抱歉，如果问题不清楚， 当我单击第一个复选框时，说贝宝，然后只有贝宝标签和文本框应该出现在下面，其余的文本框 2 及其标签应该隐藏。我猜我们需要用 each() 循环遍历 UL 标记。

这是一个小提琴。 http://jsfiddle.net/nzw7LoL0/5/

更新 2

我无法向名为 option 和 option 1 的 div 添加一个类，因为 html 是使用框架生成的。所以我需要隐藏具有.control-grouphttp://jsfiddle.net/d280wqr4/5/类的行

$('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'))find('.control-group').show();
    } else { // Otherwise, hide the relevant element
        $('.option' + $(this).prop('value')).find('.control-group')hide();
    }
});


<div class="control-group "><label for="Configuration_paypalId" class="control-label">Paypal Id</label><div class="controls"><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>

    <div class="control-group "><label for="Configuration_stripeId" class="control-label">Stripe Id</label><div class="controls"><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></div>

Answer 1

分配一个通用类，让选择器变得简单

<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>

Answer 2

如果您能够稍微更改您的标记，那么您可以通过这种方式使用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">

Answer 3

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

下面的例子应该如你所愿。

$('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>