Checkbox Jquery. Всем по name

292

09 января 2017, 22:41

Приветствую. Есть несколько табов со списком юзеров. html (кусок):

<div class="tab-content">
    <div id="group_2" class="tab-pane fade in active">
        <div class="col-lg-6">
            <ul>
                <li><input type="checkbox" name="g2" class="chk-all" id="#group_2" value="Администрация: Все"> Всем
                </li>
                <li><input type="checkbox" name="g2" value="Пользователь 1"> Пользователь 1</li>
            </ul>
        </div>
    </div>
    <div id="group_3" class="tab-pane fade">
        <div class="col-lg-6">
            <ul>
                <li><input type="checkbox" name="g3" class="chk-all" id="#group_3"
                           value="Персонал: Все"> Всем
                </li>
                <li><input type="checkbox" name="g3" value="Юзер 1"> Юзер 1</li>
            </ul>
        </div>
    </div>

Необходимо собирать values инпутов и выводить их на экран в строке.

<p class="p-send-msg">Получатели сообщения: <span class="send_msg"> </span></p>

Вопрос в том, как обработать "Всем"? Сейчас при нажатии на "Всем" выделяются все элементы под ним и добавляются в строку. Сняли галку со "Всем" - список очистился. Хотелось бы, как у людей: если выбрали все элементы списка, то автоматом получили галку на "Всем". Сняли с одного - галку и текст в списке "Всем" удалять. Скрипт:

$("input[type=checkbox]").change(function () { // Событие по изменению чекбокса
var txt = '', // переменная, хранящая значение input
    chks = $(document.getElementsByName(this.name)), // запоминаем имя input
    all = chks.filter('.chk-all'); // запоминаем элемент с классом chk-all
if ($(this).hasClass('chk-all')) { // если чекбокс имеет класс chk-all
    $(chks).prop('checked', $(this).prop('checked')); // взять свойство этого чекбокса и поменять у всех input то же свойство на текущее свойство чекбокса chk-all
}
$("input[type=checkbox]").each(function () { // цикл для каждого
    if ($(this).is(":checked")) { // если отмечен
        txt += ($(this).val() + ', '); // добавляем в переменную значение input
        $('.send_msg').text(txt); // отображаем текст на экране
    }
    else if (!txt) {
        $('.send_msg').empty(); // если переменная пустая, очищаем поле на экране
    }
    //console.log(txt, txt.length);
    });
});

Спасибо!

Answer 1

$(document).ready(function() { 
  $(".chk-all").click(function() { 
    if ($(this)[0].checked) { 
      $("[name=" + $(this).attr("name") + "]").prop("checked", true); 
 
    } else { 
      $("[name=" + $(this).attr("name") + "]").prop("checked", false); 
 
    } 
    foo(); 
  }); 
 
  $("input").click(function() { 
    if (!$(this)[0].checked) { 
      $(".chk-all[name=" + $(this).attr("name") + "]").prop("checked", false); 
      $(this).find("input").prop("checked", true); 
    } else { 
      $(this).find("input").prop("checked", false); 
    } 
    foo(); 
  }) 
}); 
 
function foo() { 
  var text = ""; 
  $("input").each(function(i, item) { 
    if (!$(item).hasClass("chk-all")) { 
      if ($("input")[i].checked) 
        text += $(item).val() + " , "; 
    } 
  }) 
  $("#xxx").html(text); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="tab-content"> 
  <div id="group_2" class="tab-pane fade in active"> 
    <div class="col-lg-6"> 
      <ul> 
        <li> 
          <input type="checkbox" name="g2" class="chk-all" id="#group_2" value="Администрация: Все">Всем 
        </li> 
        <li> 
          <input type="checkbox" name="g2" value="Пользователь 1">Пользователь 1</li> 
        <li> 
          <input type="checkbox" name="g2" value="Пользователь 2">Пользователь 2</li> 
      </ul> 
    </div> 
  </div> 
  <div id="group_3" class="tab-pane fade"> 
    <div class="col-lg-6"> 
      <ul> 
        <li> 
          <input type="checkbox" name="g3" class="chk-all" id="#group_3" value="Персонал: Все">Всем 
        </li> 
        <li> 
          <input type="checkbox" name="g3" value="Юзер 1">Юзер 1</li> 
        <li> 
          <input type="checkbox" name="g3" value="Юзер 2">Юзер 2</li> 
      </ul> 
    </div> 
  </div> 
  <span id="xxx"></span>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Универсальная функция для waypoint

Доброго времени суток)

312

CSS

Как при переходе на сайт через определенное время сменить цвет фона?

Как при переходе на сайт через определенное время сменить цвет фона и больше его не менять (до перезагрузки)?

371

c++

Что делает синтаксис (type*)?

А именно: = (type*) (

277

c++

MessageBox отдельно от основной программы

Во-первых, скажу, что MessageBox'a я вывел в отдельный поток (чтобы не ждать ответа пользователя), но дело в том, что мне нужно сделать так, чтобы после...

394