Question

经过许多诱惑之后，当选中复选框（在同一INPUT内）时，我仍然无法选择下一个DIV向其添加类。预期结果是：

复选框已选中->将类auto-save添加到下一个input（该类附加到form-control上）。

<div class="col-md-12">
    <label class="checkbox-bootstrap checkbox-sm">
        <input class="save_data" id="save_title" type="checkbox" />
        <span class="checkbox-placeholder"></span>
    </label>
    <label for="title">Title (max 120 characters)</label>                           
    <input type="text" class="form-control" id="title" placeholder="Title" name="title" autocomplete="off" maxlength="120">
</div>

我不想使用类名或 ids ，因为该代码具有许多复选框，并且要添加的类始终相同（{ {1}中的每一个{1}}。

auto-save

Answer 1

您需要具有复选框的更改处理程序，以便根据复选框的选中状态在文本框中添加和删除类。您还使用了错误的选择器来定位文本框元素。您需要遍历到最接近的div，然后在其中找到文本元素。

您还可以使用.toggleClass()来减少代码：

 $('.save_data').change(function(){
      $(this).closest('div').find(':text').toggleClass('auto-save',this.checked);
 });

$('.save_data').change(function(){
      $(this).closest('div').find(':text').toggleClass('auto-save',this.checked);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
    <label class="checkbox-bootstrap checkbox-sm">
        <input class="save_data" id="save_title" type="checkbox" />
        <span class="checkbox-placeholder"></span>
    </label>
    <label for="title">Title (max 120 characters)</label>                           
    <input type="text" class="form-control" id="title" placeholder="Title" name="title" autocomplete="off" maxlength="120">
</div>

Answer 2

您需要尝试

$('[type=checkbox]').click(function(){
  if ($(this).is(':checked')) {
      $(this).closest('div').find('input[name="title"]').addClass('auto-save');
  }
  else {
      $(this).closest('div').find('input[name="title"]').removeClass('auto-save');
  }
});

在同一DIV中单击复选框时，选择下一个输入

2 个答案: