Как установить возможность выделения радио-кнопки или checkbox? Только одного.

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

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

HTML5
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
<tr>
                <td>1</td>
                <td>Lamborghini CENTENARIO 2017</td>
                <td>black</td>
                <td>370</td>
                <td>10</td>
                <td>5</td>
                <td>
                    
                    $1,900,000.00
                </td>
                <td>
                    20-05-2002
                </td>
                <td>2018</td>
                <td>
                    <div class="editClass">
                        <label>
                            <input class="radioClass" type="checkbox" name="z1234j"
                            />
                            <i></i>
                        </label>
                    </div>
                </td>
            </tr>
        
            <tr>
                <td>2</td>
                <td>Acura NSX 2016</td>
                <td>blue</td>
                <td>330</td>
                <td>8</td>
                <td>10</td>
                <td>
                    
                    $150,000.00
                </td>
                <td>
                    20-05-2001
                </td>
                <td>2018</td>
                <td>
                    <div class="editClass">
                        <label>
                            <input class="radioClass" type="checkbox" name="z12вавва34j"
                            />
                            <i></i>
                        </label>
                    </div>
                </td>
            </tr>
        
            <tr>
                <td>3</td>
                <td>Aston Martin Vantage GT12</td>
                <td>red</td>
                <td>297</td>
                <td>7</td>
                <td>15</td>
                <td>
                    
                    $370,000.00
                </td>
                <td>
                    20-05-2003
                </td>
                <td>2017</td>
                <td>
                    <div class="editClass">
                        <label>
                            <input class="radioClass" type="checkbox" name="yx125676734j"
                            />
                            <i></i>
                        </label>
                    </div>
                </td>
            </tr>

Радио-кнопки и чекбоксы - не принадлежать к какой-либо группе, каждый независимо расположен на строке таблице в ячейке, для каждого генерируется уникальное имя.

Как сделать так, чтобы пользователь не смог выделить одновременно больше одного ?
Он лишь может только снять выделения (это реализовано на CSS) и не один не будет выделен, но не должно быть одновременно выделено больше одного.

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

@2849141 · 02.11.2018, 20:31

JavaScript
1
2
3
4
5
6
7
8
$("table input:checkbox").click(function(){
    if($(this).prop('checked')){
        $('table input:checkbox').prop('checked', false);
        $(this).prop('checked', true);
    } else {
        $(this).prop('checked', false);
    }
});

@masli · 02.11.2018, 21:26 **[ТС]**

я пробовал, но почему то не работает, может эту часть (("table input:checkbox")) - названиями классов заменить(правда не знаю что).
Можете пояснить код?

Вот мое итоговое окно.

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

HTML5
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
<body onload="liftAndHighlight()" >
 
<form name="updateCar" action="/carEntryEdit" method="post">
 
    
 
 
 
 
<div class="title">
    
    <h2>Список записей <span> всей таблицы: Cars (редактирование)</span>
    </h2>
</div>
<div class="table-header">
    <table class="tablesorter scroll-table">
        <thead>
        <tr>
            <th>Ид</th>
            <th>Модель машины</th>
            <th>Цвет</th>
            <th>скорость (км/ч)</th>
            <th>Расход топлива (л/100 км)</th>
            <th>шт</th>
            <th>Цена</th>
            <th>Дата поставки</th>
            <th>год выпуска</th>
            <th>редактирование</th>
        </tr>
        </thead>
        <tbody>
        
        
            <tr>
                <td>1</td>
                <td>Lamborghini CENTENARIO 2017</td>
                <td>black</td>
                <td>370</td>
                <td>10</td>
                <td>5</td>
                <td>
                    
                    $1,900,000.00
                </td>
                <td>
                    20-05-2002
                </td>
                <td>2018</td>
                <td>
                    <div class="editClass">
                        <label onMouseDown="this.firstElementChild.isChecked=this.firstElementChild.checked;"
                               onClick="this.firstElementChild.checked=!this.firstElementChild.isChecked;">
                            <input class="radioClass" type="radio" name="z123rfgf4j"/>
                            <i></i>
                        </label>
                    </div>
                </td>
            </tr>
        
            <tr>
                <td>2</td>
                <td>Acura NSX 2016</td>
                <td>blue</td>
                <td>330</td>
                <td>8</td>
                <td>10</td>
                <td>
                    
                    $150,000.00
                </td>
                <td>
                    20-05-2001
                </td>
                <td>2018</td>
                <td>
                    <div class="editClass">
                        <label onMouseDown="this.firstElementChild.isChecked=this.firstElementChild.checked;"
                               onClick="this.firstElementChild.checked=!this.firstElementChild.isChecked;">
                            <input class="radioClass" type="radio" name="z123fgfg4j"/>
                            <i></i>
                        </label>
                    </div>
                </td>
            </tr>
 
и т.д.

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

@2849141 · 03.11.2018, 01:03

смотреть

JavaScript
1
2
3
4
5
6
7
8
9
10
$(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);
    }
  });
});

При клике по radio/checkbox проверяю был ли он отмечен (добавил атрибут data).

HTML5
1
<input type="radio" data-flag="false">

Если нет, то убираю все и оставляю тот, по которому кликнули.
Если да – просто снимаю отметку.

@masli · 03.11.2018, 17:43 **[ТС]**

четко работает, спасибо.

Решено.

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. 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? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@masli 52 / 18 / 11 Регистрация: 27.03.2013 Сообщений: 789
	03.11.2018, 17:43 [ТС]
	четко работает, спасибо. Решено. 0

Как установить возможность выделения радио-кнопки или checkbox? Только одного.

Решение