jquery只有属于check all的输入

Question

我怎样才能使检查全部只关注属于该检查的4个输入？如果现在单击2（或3）链接全部并更改一个输入，则所有输入都将更改。我只希望输入更改属于该检查全部。

＆＃13;

＆＃13;

$(document).ready(function() {
  var s;

  $('.margin-checkall').on('click', function() {
    $(this).toggleClass('checked');
  });

  $('.css-margin').on('change', function() {
    s = $(this).val();
    $(this).val(s);
    if ($('.margin-checkall').hasClass('checked')) {

      $('.margin-checkall.checked').parent().parent().next('ul').find('li').each(function() {
        $(this).find('.css-margin').val(s);
      });
    }
  });
});

＆＃13;

html,
body {
  font: 12px/1.0em Arial;
}

.margin-checkall {
  display: inline-block;
  cursor: pointer;
}

.margin-checkall:hover,
.margin-checkall.checked {
  color: #0085ba;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="css-layout-margin">
  <div class="caption">
    <div class="link">
      <span class="margin-checkall">Link all values.</span>
    </div>
  </div>

  <ul>
    <li>
      <label>Top</label>
      <input type="text" class="css-margin" value="" tabindex="1">
    </li>
    <li>
      <label>Right</label>
      <input type="text" class="css-margin" value="" tabindex="2">
    </li>
    <li>
      <label>Bottom</label>
      <input type="text" class="css-margin" value="" tabindex="3">
    </li>
    <li>
      <label>Left</label>
      <input type="text" class="css-margin" value="" tabindex="4">
    </li>
  </ul>
</div>

<div class="css-layout-margin">
  <div class="caption">
    <div class="link">
      <span class="margin-checkall">Link all values.</span>
    </div>
  </div>

  <ul>
    <li>
      <label>Top</label>
      <input type="text" class="css-margin" value="" tabindex="1">
    </li>
    <li>
      <label>Right</label>
      <input type="text" class="css-margin" value="" tabindex="2">
    </li>
    <li>
      <label>Bottom</label>
      <input type="text" class="css-margin" value="" tabindex="3">
    </li>
    <li>
      <label>Left</label>
      <input type="text" class="css-margin" value="" tabindex="4">
    </li>
  </ul>
</div>

<div class="css-layout-margin">
  <div class="caption">
    <div class="link">
      <span class="margin-checkall">Link all values.</span>
    </div>
  </div>

  <ul>
    <li>
      <label>Top</label>
      <input type="text" class="css-margin" value="" tabindex="1">
    </li>
    <li>
      <label>Right</label>
      <input type="text" class="css-margin" value="" tabindex="2">
    </li>
    <li>
      <label>Bottom</label>
      <input type="text" class="css-margin" value="" tabindex="3">
    </li>
    <li>
      <label>Left</label>
      <input type="text" class="css-margin" value="" tabindex="4">
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题在于$('.margin-checkall')。这将获取此类的所有元素，而您只需要在代码中输入元素之前的元素。

$(document).ready(function() {

  $('.margin-checkall').on('click', function() {
    $(this).toggleClass('checked');
  });

  $('.css-margin').on('change', function() {
    var $this = $(this);
    var $container = $this.closest('.css-layout-margin');
    if ($container.find('.margin-checkall').hasClass('checked')) {
      $container.find('.css-margin').val($this.val());
    }
  });

});

Answer 2

在这里，您可以再使用一个解决方案： - https://jsfiddle.net/rjjuw03o/1/

＆＃13;

＆＃13;

$(document).ready(function() {

	var s;

  $('.margin-checkall').on('click', function() {
    $(this).toggleClass('checked');
  });

  $('.css-margin').on('change', function() {
    s = $(this).val();
		$(this).val(s);
    var test = $(this).closest('.css-layout-margin').find('.margin-checkall');
    if ($(test).hasClass('checked')) {

      $(test).parent().parent().next('ul').find('li').each(function() {
        $(this).find('.css-margin').val(s);
      });
    }
  });

});

＆＃13;

html,
body {
  font: 12px/1.0em Arial;
}

.margin-checkall {
  display: inline-block;
  cursor: pointer;
}

.margin-checkall:hover,
.margin-checkall.checked {
  color: #0085ba;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
<div class="css-layout-margin">
  <div class="caption">
    <div class="link">
      <span class="margin-checkall">Link all values.</span>
    </div>
  </div>

  <ul>
    <li>
      <label>Top</label>
      <input type="text" class="css-margin" value="" tabindex="1">
    </li>
    <li>
      <label>Right</label>
      <input type="text" class="css-margin" value="" tabindex="2">
    </li>
    <li>
      <label>Bottom</label>
      <input type="text" class="css-margin" value="" tabindex="3">
    </li>
    <li>
      <label>Left</label>
      <input type="text" class="css-margin" value="" tabindex="4">
    </li>
  </ul>
</div>

<div class="css-layout-margin">
  <div class="caption">
    <div class="link">
      <span class="margin-checkall">Link all values.</span>
    </div>
  </div>

  <ul>
    <li>
      <label>Top</label>
      <input type="text" class="css-margin" value="" tabindex="1">
    </li>
    <li>
      <label>Right</label>
      <input type="text" class="css-margin" value="" tabindex="2">
    </li>
    <li>
      <label>Bottom</label>
      <input type="text" class="css-margin" value="" tabindex="3">
    </li>
    <li>
      <label>Left</label>
      <input type="text" class="css-margin" value="" tabindex="4">
    </li>
  </ul>
</div>

<div class="css-layout-margin">
  <div class="caption">
    <div class="link">
      <span class="margin-checkall">Link all values.</span>
    </div>
  </div>

  <ul>
    <li>
      <label>Top</label>
      <input type="text" class="css-margin" value="" tabindex="1">
    </li>
    <li>
      <label>Right</label>
      <input type="text" class="css-margin" value="" tabindex="2">
    </li>
    <li>
      <label>Bottom</label>
      <input type="text" class="css-margin" value="" tabindex="3">
    </li>
    <li>
      <label>Left</label>
      <input type="text" class="css-margin" value="" tabindex="4">
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

而不是循环遍历所有 .margin-checkall ，而只是遍历焦点输入div。