Не срабатывает отмена выделения радиокнопки из группы кнопок

@masli · Регистрация: 27.03.2013

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

При переходе на jQuery перестало работать отмена выделения радиокнопки, если нажимается другая.
Выделяться должна одна кнопка.

У радиокнопки в каждой строке - генерируются уникальные имена.

Ранее, когда таблица передавалась на клиента, как полностью html эта функция работала.

Теперь таблица рисуется с помощью jQuery. а данные получаются из ajax-запроса.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<h1>Список сотрудников</h1>
 
<table id="table_list">
    <tr>
        <th>ID</th>
        <th>Email</th>
        <th>Пароль</th>
        <th>Заработная плата</th>
        <th>Операции</th>
    </tr>
    <tbody id="table_body">
    </tbody>
</table>

css

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/* обозначаем блок - флексом,
    и указываем, что элементы внутри блока,
    должны распологаться по центру.
*/
.editClass {
    display: flex;
    justify-content: center;
}
 
/*Свойство display отвечает за вывод и
    визуальное отображение элементов на странице.
 Так как любой html-элемент генерирует на веб-странице
прямоугольный контейнер, укажем, что элемент не генерирует никакой контейнер,
полностью удаляясь со страницы.
*/
.radioClass{
    vertical-align: top; /*управляет вертикальным выравниванием
         строчных элементов и содержимого ячеек таблицы.*/
    width: 15px;
    height: 15px;
    display: none;/*элемент с "видом по умолчанию",
      исключается из общего потока, он не отображается на экране
      и под него не резервируется место на странице*/
 
}
 
/*рисуем радио-кнопку*/
i{
    display: inline-block;/*Элемент генерирует строковый блок.*/
    width: 20px; /*размеры*/
    height: 20px;
    border: 1px solid #000;
    border-radius: 50%;/* получаем круглый элемент*/
    position: relative;
    cursor: pointer;
}
 
/*вид элемента до и после включения*/
i:after,i:before{
    content: '';
    width: 100%;/* заполенение элемента на 100 %*/
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform .5s;/*transition применяется для плавного изменения
    вида элемента при наведении на него курсора*/
    border-radius: 50%;
}
 
/*цвет после нажатия*/
i:after{
    background: green;
 
}
 
/*цвет перед нажатием*/
i:before{
    background: #FFFF66;
 
}
 
/* поведение изменения цвета кнопки после того,
как было снято выделение данной кнопки*/
.radioClass:not(:checked)+i:after{
    transform: scale(0); /*для горизонтального масштабирования и для вертикального,
    0 - checkbox - постепенно теряет цвет и становится внутри с обычным фоном */
}
 
/* поведение изменения цвета кнопки после того,
как было выделена данная кнопка*/
.radioClass:checked+i:after{
    transform: scale(1);/*checkbox - заполняется цветом */
}
 
/*для скрипта, который фокусируется на последней странице в столбце.*/
.changeColor {
    border: 3px solid red;
}
 
/*информационное сообщение на странице редактирования*/
.choice{
 
    padding-top: 25px;
    padding-left: 25px;
    padding-bottom: 25px;
    color: red;
    font-size: 15px;
}

js

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* выбирается только один checkbox или radio-кнопка*/
    $(function(){
        $("table input:radio, table input:checkbox").click(function(){
            if($(this).data('flag') === false){
                $('table input:radio, table input:checkbox').prop('checked', false).data('flag', false);
                $(this).prop('checked', true).data('flag', true);
            } else {
                $(this).prop('checked', false).data('flag', false);
            }
        });
    });
 
    function addEmploye(employe) {
        var employeList = $("#table_list").find("tbody:last");
 
        var idCol = "<td>" + employe.id + "</td>";
        var emailCol = "<td>" + employe.email + "</td>";
        var passwordCol = "<td>" + employe.password + "</td>";
        var salaryCol = "<td>" + employe.salary + "</td>";
 
        var btn = "<input type='radio' name='myRadio_" + employe.id + "' id='myRadio_" + employe.id + "'>";
 
        var inputRadio = "<input class='radioClass' type='radio' name=" + employe.id + " data-flag=\"false\"/>";
        var iTag = "<i></i>";
        var labelForRadioLeft = "<label onMouseDown=\"this.firstElementChild.isChecked=this.firstElementChild.checked;\"" +
            "onClick=\"this.firstElementChild.checked=!this.firstElementChild.isChecked;\">";
        var labelForRadioRight = "</label>";
        var radio = "<td><div class='editClass'>" + labelForRadioLeft + inputRadio + iTag + labelForRadioRight +
             "</label></div></td>";
 
        var actionCol = "<td>" + btn + "</td>";
 
        var employeRow = "<tr>" + idCol + emailCol + passwordCol + salaryCol + /*actionCol*/ radio + "</tr>";
 
        employeList.append(employeRow);
    }

Подскажите, в чем здесь ошибка.

@damirqa · 11.11.2018, 18:32

masli, если правильно понял, то так (обрати внимание на name)

HTML5
1
2
3
4
5
<form name="myform" action="myformhandler.cgi" method="POST">
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
</form>

@masli · 11.11.2018, 18:36 **[ТС]**

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

masli, если правильно понял, то так (обрати внимание на name)

name всегда должно быть уникальным, это обязательное условие

Радиокнопка будет выделяться только одна в группе, когда они имеют одинаковые имена.

В данном случае этого быть не должно.

На месте радиокнопки может быть checkbox.

@damirqa · 11.11.2018, 18:48

masli,

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

В данном случае этого быть не должно.

чего этого и почему?

@masli · 11.11.2018, 18:53 **[ТС]**

потому что у меня так в логике моего приложения утвержедено.

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

Но если это смущает, то здесь должны быть checkbox.

Вопрос вообще был в другом.

@damirqa · 11.11.2018, 20:40

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

во-первых,

Радиокно́пка (от англ. radio button), или переключа́тель, — элемент интерфейса, который позволяет пользователю выбрать одну опцию (пункт) из предопределенного набора (группы).

Из этого следует, что name у всех должны быть одинаковы, чтобы выбрать один из

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

name всегда должно быть уникальным, это обязательное условие

Что? Кто это вам сказал?

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

Но если это смущает, то здесь должны быть checkbox.

Чекбокс используется для выбора нескольких вариантов (конечно можно поправить, чтобы только одна выбиралась, но бред), а вы сами хотели

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

Выделяться должна одна кнопка.

JavaScript
1
2
$("input[type=radio]").prop("checked",false);
$(this).prop("checked",true);

с этим поработайте

@masli · 11.11.2018, 21:14 **[ТС]**

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

Что? Кто это вам сказал?

читайте внимательно вопрос.

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

Чекбокс используется для выбора нескольких вариантов (конечно можно поправить, чтобы только одна выбиралась, но бред), а вы сами хотели

читайте внимательно вопрос.

Добавлено через 1 минуту

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

Из этого следует, что name у всех должны быть одинаковы, чтобы выбрать один из

Внимательно вчитайтесь в объяснение вопроса

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@masli 52 / 18 / 11 Регистрация: 27.03.2013 Сообщений: 789
	11.11.2018, 18:53 [ТС]
	потому что у меня так в логике моего приложения утвержедено. Мне нужна уникальная радио кнопка, потому что ее значение будет использовано далее в коде. Но если это смущает, то здесь должны быть checkbox. Вопрос вообще был в другом. 0