установите / снимите флажки bootstrap с помощью jQuery

Я сделал еще один в должности вчера и не имел успеха с ним. Теперь я попытаюсь переупорядочить идею и спросить снова, так как я не могу найти решение для этого (я новичок, и я очень стараюсь).

дело в том, что я работаю с этим шаблоном на основе Bootstrap, и это код, который я могу видеть непосредственно из одного из файлов и который я использую в своем проекте:

HTML-код фрагмент:

<div class="hide" id="states">
  <div class="control-group">                           
    <label class="control-label">Seleccione</label>
      <div class="controls">
        <label class="checkbox span4">
          <input type="checkbox" value="all" id="allstates" name="all"/>Todas
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]"/> Buenos Aires
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
        </label>
      </div>
    </div>
  </div>

после большого поиска я основал при проверке, что мой код выглядит так (фрагмент):

<div class="controls">
  <label class="checkbox span4">
    <div class="checker" id="uniform-allstates">
      <span>
        <input type="checkbox" value="all" id="allstates" name="all">
      </span>
    </div>Todas
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Caba" id="" name="st[]">                          
       </span>
    </div> Ciudad Autónoma de Buenos Aires
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]">                           
      </span>
    </div> Buenos Aires
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Catamarca" id="" name="st[]">                             
      </span>
    </div> Catamarca
  </label>
</div>

как вы можете видеть, добавлен еще один div и другой span (серьезно не знаю, почему и как), поэтому я предполагаю, что теперь это какая-то проблема DOM, которая у меня есть.

это фрагмент моего JS-файла:

$('#allstates').click(function() {
  $('.checkbox').find('span').addClass('checked');
});

таким образом, эта функция выбирает все флажки, которые у меня есть (хотя те, что я не хочу, потому что они принадлежат к другой категории).

Я хочу знать, почему добавлены div и span и как выбрать только флажки, которые я хочу.

для этого я пробовал такой код, но без успеха:

8
checkbox html javascript jquery twitter-bootstrap

4 ответов

также важно добавить prop в true при выборе флажков:

$("#checkAll").click(function(){
   var check = $(this).prop('checked');
   if(check == true) {
     $('.checker').find('span').addClass('checked');
     $('.checkbox').prop('checked', true);
   } else {
     $('.checker').find('span').removeClass('checked');
     $('.checkbox').prop('checked', false);
   }
});
7

поскольку я упомянул, что эта функция проверила все флажки, которые у меня были (хотя те, которые не должны были быть проверены), я пытался найти решение:

$('#allstates').click(function() {
  $('.checkbox').find('span').addClass('checked');
});

но это не то, что хотел. Я также упомянул, что заметил, что код был "другим" при его проверке (в Chrome с F12). Так как @thecbuilder сказал, он меняется, чтобы добавить стиль.

Я понял, что с тех пор код меняется... Мне пришлось сменить класс (флажок), с которого я запускал поиск "span tag", поэтому я меняю флажок класса на ID-состояния, и это результат:

$('#allstates').click(function() {
  if($(this).attr("checked")){
    $('#states').find('span').addClass('checked');        
  }else{
    $('#states').find('span').removeClass('checked');
  }    
});

теперь он, наконец, работает.

6

Я думаю, что вы ищете код:

$(document).ready(function()
{
    $("#allstates").on("change", function()
    {
        var checked = $(this).prop("checked");

        $(this).parents(".controls")
            .first()
            .find("input[type=checkbox]")
            .prop("checked", checked);
    });
});

Пример JsFiddle

когда состояние флажка с идентификатором allstates изменения, получить значение флажка, найти первый родительский элемент html с классом под названием controls и затем только обновите все флажки в этом элементе со значением checked.

2

простой флажок начальной загрузки

<label><input type="checkbox" value="">Option 1</label>

при отладке в Chrome dev tool метка выглядит так https://tinker.нажмите / изображения/bootstrap-checkbox-label-2017-01-17_084755 - ... формат PNG

to toogle состояние флажка просто установите true|false on lable.control.checked

label.control.checked = false; //uncheck
label.control.checked = true; //check

видео демо https://youtu.be/3qEMFd9bcd8

0