如何在重新加载页面后激活复选框?

时间:2017-07-24 07:12:02

标签: javascript jquery html checkbox

1)我选择了正确的复选框
2)按下"申请"按钮
3)重新加载页面 4)保留活动复选框,但名称是"标签"没有在单独的块中呈现
5)如果我点击任何复选框,则所有复选框都处于活动状态

将复选框呈现给所有活动标签并在#unit处呈现它们。我明白了,

var checkboxes = $('input[type=checkbox]:checked');

但显示无法

请帮忙,谢谢



$(document).ready(function() {
  checkbox = $('.ctf--b-filt-check-list :checkbox').on('change', function() {
    $('#unit').empty();
    var count = 0;
    $('.ctf--b-filt-c-item').map(function(i, el) {
      let unit = $(this).find('input:checked').map(function(i, el) {
        return ('<div class="ctf-b-btn-filter-items">' + $('[for="' + el.id + '"]').text() + '</div>');
      }).get();
      if (unit.length > 0) {
        count += unit.length;
        $('#unit').append('<div class="father father_tmp">' + $(this).find('.b-txt').text() + '</div>');
        $('#unit').find('.father_tmp').append(unit.join(''));
        $('.father_tmp').removeClass('father_tmp');
      }
    });
  });

});
&#13;
.father {
  width: 500px;
  height: 100%;
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px;
}

.ctf-b-btn-filter-items {
  padding: 2px;
  width: 100;
  height: 100%;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #ffffff;
  border-radius: 2px;
  background: #35aaed;
  background: linear-gradient(to bottom, #35aaed 0%, #0b80c4 100%);
  text-align: center;
  display: inline-block;
  vertical-align: top;
  margin: 0 5px 0 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ctf--b-filt-c-item open ctf--b-filt-c-item--active">
  <div class="ctf--b-filt-c-head"><span class="b-txt">Единица измерения:</span></div>
  <div class="ctf--b-filt-c-body" style="display: block;">
    <div class="ctf--b-wpr-scr">
      <ul class="ctf--b-filt-check-list ctf--b-filt-check-list--double">
        <li>
          <input type="checkbox" id="idchkk_2_0_0" value="11770">
          <label for="idchkk_2_0_0" data="text">
                        <i></i>
                        Килограмм
                    </label>
        </li>
        <li>
          <input type="checkbox" id="idchkk_2_0_1" value="11771">
          <label for="idchkk_2_0_1" data="text">
                        <i></i>
                        Тонна
                    </label>
        </li>
      </ul>
      <ul class="ctf--b-filt-check-list ctf--b-filt-check-list--double">
      </ul>
    </div>
  </div>
</div>


<div class="ctf--b-filt-c-item open ctf--b-filt-c-item--active">
  <div class="ctf--b-filt-c-head"><span class="b-txt">Полярность:</span></div>
  <div class="ctf--b-filt-c-body" style="display: block;">
    <div class="ctf--b-wpr-scr">
      <ul class="ctf--b-filt-check-list ">
        <li>
          <input type="checkbox" id="idchkk_2_2_0" value="11773">
          <label for="idchkk_2_2_0" data="polarity">
                        <i></i>
                        Обратная
                    </label>
        </li>
        <li>
          <input type="checkbox" id="idchkk_2_2_1" value="11776">
          <label for="idchkk_2_2_1" data="polarity">
                        <i></i>
                        Прямая
                    </label>
        </li>
      </ul>
    </div>
  </div>
</div>

<div id="count"></div>
<div id="unit"></div>
&#13;
&#13;
&#13;

0 个答案:

没有答案