Checkbox Jquery. All by name

Question

Greetings. There are several tabs with a list of users. html (piece):

<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>

It is necessary to collect the values of the inputs and display them in the line.

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

The question is how to handle the "All"? Now when you click on "All", all the elements below it are highlighted and added to the line. They took a daw with "All" - the list was cleared. I would like, as in people: if you selected all the elements of the list, then you automatically received a checkbox on "Everyone." Removed from one - a daw and the text in the list "All" to delete. Script:

 $("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); }); });

Thank!

Accepted Answer · 2017-01-08T15:53:10

 $(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>

We need some kind of universal approach, processing lists by input name.

Checkbox Jquery. All by name

1 answer 1

More articles: