Подскажитите по работе с chekbox

@AndreyQ · Регистрация: 13.09.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте!!
С JavaScript не очень дружу, ток базовые понятия есть и не сложные решения могу создавать. Столкнулся с задачей которую никак не могу реализовать. С помощью такой конструкции, из запроса формирую список Чекбоксов.

PHP
1
2
3
4
5
6
7
8
9
$r1 = mysql_query("select id FROM types");
        for($i=0; $i<mysql_num_rows($r1); $i++)
            {
                $m1 = mysql_fetch_array($r1);
                $ck.="<h2>Тест№ ".$m1[id]."</h2><br>";
                $ck.="<label>Тип 1:<input type=\"checkbox\" id=\"type_1_".$m1[id]."\" name=\"type_1_".$m1[id]."\" value=\"\"></label><br>";
                $ck.="<label>Тип 2:<input type=\"checkbox\" id=\"type_2_".$m1[id]."\" name=\"type_2_".$m1[id]."\" value=\"\"></label><br>";
                $ck.="<label>Тип 3:<input type=\"checkbox\" id=\"type_3_".$m1[id]."\" name=\"type_3_".$m1[id]."\" value=\"\"></label><br>";
            }

Получается на каждый шаг выборки формируется три чекбокса:

Test1
Тип1 (id=type_1_1)
Тип2 (id=type_2_1)
Тип3 (id=type_3_1)
Test2
Тип1 (id=type_1_2)
Тип2 (id=type_2_2)
Тип3 (id=type_3_2)
Test3
Тип1 (id=type_1_3)
Тип2 (id=type_2_3)
Тип3 (id=type_3_3)
и т.д. до конца таблицы

Мне нужно сделать так чтоб если уже выбран чекбокс из одной группы(тест3) например с "id=type_2_3", то выбирать уже можно ток чекбоксы из этой группы(тест3) с id=type_1_3 и с id=type_3_3, как только выбран чекбокс будет из другой группы(тест1 иль тест2) с id=type_1_2 или id=type_2_1, то все выбранные чекбоксы в других группах сбрасывались.
Подскажите как это можно реализовать на JavaScript.

@AndreyQ · 19.01.2017, 13:16 **[ТС]**

В общем сам решил данную проблему используя селекторы и классы с применением JQuery.
Вот две группы с чекбоксами (checkbox). Взял для теста статичные чекбоксы.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<h2>Группа 1</h2>        
        <input type=\"checkbox\" class=\"main\" title=\"Все\"/>Все<br>
        <input type=\"checkbox\" class=\"all\" data-id=\"d1\" title=\"Выбрать все\"/>Общий<br/>
        <div id=\"d1\">
                <input type=\"checkbox\" class=\"one\" data-id=\"d1\" id=\"g1_1\" title=\"Выбрать\"/><br/>
                <input type=\"checkbox\" class=\"one\" data-id=\"d1\" id=\"g2_1\" title=\"Выбрать\"><br/>
                <input type=\"checkbox\" class=\"one\" data-id=\"d1\" id=\"g3_1\" title=\"Выбрать\"/>
         </div>
 
         <h2>Группа 2</h2>
         <input type=\"checkbox\" class=\"all\" data-id=\"d2\" title=\"Выбрать все\"/>Общий<br/>
         <div id=\"d2\">
                <input type=\"checkbox\" class=\"one\" data-id=\"d2\" id=\"g1_2\" title=\"Выбрать\"/><br/>
                <input type=\"checkbox\" class=\"one\" data-id=\"d2\" id=\"g2_2\" title=\"Выбрать\"/><br/>
                <input type=\"checkbox\" class=\"one\" data-id=\"d2\" id=\"g3_2\" title=\"Выбрать\"/>
         </div>

У них у всех есть общий класс и дата-айди. Используя их я смог добится того чтоб, если отмечен чекбокс в "Группе 1"Б а я отмечаю какойнибуть чекбокс в "Группе 2", то в "Группе 1" снимаются галочки. Оказалось все достаточно просто))))

JavaScript
1
2
3
4
$('.one').on('change', function(){ 
                    var groupId = $(this).data('id');
                    $('.one:checked:not(.one[data-id="' + groupId + '"])').prop('checked', false);
                });

Добавлено через 24 минуты
Вот ссылочка на наглядную работу скрипта https://jsfiddle.net/ooeooxdd/

@sad67man · 19.01.2017, 13:23

AndreyQ,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<h2>Группа 1</h2>
<div class='group'>
  <input type="checkbox"/><br>
  <input type="checkbox"/><br>
  <input type="checkbox"/>
</div>
<h2>Группа 2</h2>
<div class='group'>
  <input type="checkbox" /><br>
  <input type="checkbox" /><br>
  <input type="checkbox" />
</div>
<h2>Группа 3</h2>
<div class='group'>
  <input type="checkbox" /><br>
  <input type="checkbox" /><br>
  <input type="checkbox" />
</div>

JavaScript
1
2
3
4
$('.group :checkbox').change(function(){
    var $group = $(this).closest('.group').find(":checkbox");
    $('.group :checkbox').not($group).prop('checked', false);
})

https://jsfiddle.net/v9Ltdkqx/

@AndreyQ · 19.01.2017, 18:11 **[ТС]**

Я так понимаю, тут обязательно нужен DIV который будет обертывать группы чекбоксов, а дальше если чекбокс не принадлежит к Диву в котором выбран текущий чекбокс, то с него снять отметку.
Мой вариант без дивов будет работать. Правда т.к. у меня по любому див используется для обертывания чекбоксов, ваш код мне тож подойдет

Добавлено через 4 часа 14 минут
Еще вопрос по этой теме. Расширяю функционал. При выставлении галки в чекбоксе VALUE этого чекбокса перемещается в поле с текстом. Мне требуется чтоб при выборе галки в другой группе сбрасывались значения у всех текстовых полей, если в этой групе для данного поля чекбокс не отмечен, ну а тот где чекбокс поставлен передавалось значение этого чекбокса( сейчас это и так работает).

@sad67man · 19.01.2017, 18:16

AndreyQ, У вас для каждого чекбокса есть отдельное текстовое поле?

Добавлено через 35 секунд
AndreyQ, Покажите как у вас сейчас работает.

@AndreyQ · 19.01.2017, 18:26 **[ТС]**

Ой, забыл ссылку дать https://jsfiddle.net/AndreyVT/ooeooxdd/1/
Вот как сделал.
Пытался сделать условие, по типу

JavaScript
1
if ($('.group :checkbox[id="g1_2"]').is($group).not('checked')) { $('#text3').val('');}

Но чтото не получается(
Вот если наоборот, делать так то условие прокатывает.

JavaScript
1
if ($('.group :checkbox[id="g1_2"]').is($group).prop('checked')) { $('#text3').val('');}

Но мне нужно зачистить все поля где галка не стоит, а не наоборот((

@sad67man · 19.01.2017, 18:51

AndreyQ,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<h2>Группа 1</h2>
<div class='group'>
  <input type="checkbox" data-text-id='text1' value='1'/><br>
  <input type="checkbox" data-text-id='text2' value='2'/><br>
  <input type="checkbox" data-text-id='text3' value='3'/>
</div>
<h2>Группа 2</h2>
<div class='group'>
  <input type="checkbox" data-text-id='text1' value='4'/><br>
  <input type="checkbox" data-text-id='text2' value='5'/><br>
  <input type="checkbox" data-text-id='text3' value='6'/>
</div>
<h2>Группа 3</h2>
<div class='group'>
  <input type="checkbox" data-text-id='text1' value='7'/><br>
  <input type="checkbox" data-text-id='text2' value='8'/><br>
  <input type="checkbox" data-text-id='text3' value='9'/>
</div>
<input id='text1' class='input-text'>
<input id='text2' class='input-text'>
<input id='text3' class='input-text'>

JavaScript
1
2
3
4
5
6
7
8
$('.group :checkbox').change(function(){
    var $group = $(this).closest('.group').find(":checkbox");
    $('.group :checkbox').not($group).prop('checked', false);
  $('input-text').val('');
  $group.each(function(){
    $('#'+$(this).data('text-id')).val(this.checked? this.value: '');
  })
})

https://jsfiddle.net/v9Ltdkqx/1/

@AndreyQ · 19.01.2017, 21:34 **[ТС]**

Спасибо большое))))
Разобрался)))
Влошил немного, мне не в текстовый инпут, а в Див передавать надо было, но сейчас подправил ваш вариант как надо теперь работает

https://jsfiddle.net/AndreyVT/v9Ltdkqx/2/

@AndreyQ · 23.01.2017, 14:27 **[ТС]**

Продолжил дальше изучать чекбоксы. Повилась идея чтоб при нажатии "общего" чекбокса, в текстовое поле попадали все значения чекбоксов которые отметились при нажатии на "общий".
Решил использовать each, но он почему то ставит три раза значения ток первого чекбокса.

JavaScript
1
$('.one[data-id=d2]:checked').each(function(){ mas.push( $('.one[data-id=d2]').val() );} );

https://jsfiddle.net/AndreyVT/ooeooxdd/3/

Можно мою задачу решить через цыкл фор. И я это сделал и работает как надо. Но хотелось бы понять почему each не отрабатывает как надо. Там запись короче получается, да и както мне кажется раз есть функция each для переборора то его и использовать.

JavaScript
1
2
3
4
5
6
7
var cbx = $('.one[data-id=d2]'), mas = [] ;
for (i=0; i < cbx.length; i++){
                if (cbx[i].type == "checkbox" && cbx[i].checked) 
                             {
                               mas.push(cbx[i].value);
                             }
            };

https://jsfiddle.net/AndreyVT/ooeooxdd/4/

@j2FunOnly · 23.01.2017, 14:43

Сообщение от AndreyQ

Решил использовать each, но он почему то ставит три раза значения ток первого чекбокса.

Все верно, http://api.jquery.com/val/

Get the current value of the first element in the set of matched elements.

JavaScript
1
$('.one[data-id=d2]:checked').each(function(i, elem){ mas.push( $(elem).val() );} );

@AndreyQ · 23.01.2017, 17:52 **[ТС]**

Спасибо) Сделал так и все заработало

JavaScript
1
$('.one[data-id=d2]:checked').each(function(i){ mas.push( $(this).val() );} );

Чтото както я криво эту страницу прочел http://api.jquery.com/each/
Там в самом начале про это было написано

Ссылка на рабочий вариант)))
https://jsfiddle.net/AndreyVT/ooeooxdd/5/

Добавлено через 2 часа 34 минуты
Еще вопрос появился.
По удалению из массива значений.
https://jsfiddle.net/AndreyVT/ooeooxdd/6/
В этом примере делаю так что в текстовое поле ИТОГ (text1) попадает значения всех выбранных чекбоксов (через чекбоксы Общие 1 и 2). Это работает нормально. Но я хочу чтоб при отмене чекбокса Общие1 удалились из итогового поля только значения которые принадлежат Группе1 ( Общие1).
Делаю вот так, но удаляется все, не только то что принадлежит группе 1, но и группе 2.

JavaScript
1
2
3
4
5
6
$('.one[data-id=d1]').each(function(i){ 
                        var df = Number($(this).val());
                    var index = sum.indexOf(df);
                    sum.splice(index, 1);
                });
              $('#text1').val(sum);

Добавлено через 16 минут
Сам разобрался. Я получается многомерный массив создавал, а дальше в нем уже пытался удалить методом перебора, поштучно значение

https://jsfiddle.net/AndreyVT/ooeooxdd/7/
Вот правильный вариант))

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

@AndreyQ 2 / 1 / 1 Регистрация: 13.09.2016 Сообщений: 25
	19.01.2017, 18:11 [ТС]
	Я так понимаю, тут обязательно нужен DIV который будет обертывать группы чекбоксов, а дальше если чекбокс не принадлежит к Диву в котором выбран текущий чекбокс, то с него снять отметку. Мой вариант без дивов будет работать. Правда т.к. у меня по любому див используется для обертывания чекбоксов, ваш код мне тож подойдет Добавлено через 4 часа 14 минут Еще вопрос по этой теме. Расширяю функционал. При выставлении галки в чекбоксе VALUE этого чекбокса перемещается в поле с текстом. Мне требуется чтоб при выборе галки в другой группе сбрасывались значения у всех текстовых полей, если в этой групе для данного поля чекбокс не отмечен, ну а тот где чекбокс поставлен передавалось значение этого чекбокса( сейчас это и так работает). 0

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,839
	19.01.2017, 18:16
	AndreyQ, У вас для каждого чекбокса есть отдельное текстовое поле? Добавлено через 35 секунд AndreyQ, Покажите как у вас сейчас работает. 0

@AndreyQ 2 / 1 / 1 Регистрация: 13.09.2016 Сообщений: 25
	19.01.2017, 21:34 [ТС]
	Спасибо большое)))) Разобрался))) Влошил немного, мне не в текстовый инпут, а в Див передавать надо было, но сейчас подправил ваш вариант как надо теперь работает https://jsfiddle.net/AndreyVT/v9Ltdkqx/2/ 0