Возможно ли изменение двух классов при использовании checkbox?

@Huge · Регистрация: 26.01.2016

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

Добрый день.
Есть таблица, которая рисуется из Spring с помощью Thymeleaf и два checkbox в ней, нужно при нажатии первого checkbox(или если он активирован изначально), что бы поменялся class(в данном случае интересует цвет в таблице), при нажатии другого опять смена цвета, при чем что бы при загрузке было отслеживание нажаты оба, один или вообще нет.
Как это лучше всего сделать, может у кого-то есть пример?
Я так понимаю, что при помощи только CSS это сделать нельзя.

@Уф · 21.03.2017, 09:22

песочница

CSS
1
2
3
4
5
6
7
8
#cub {
  width:200px;
  height:200px;
}
div.gray { background:#ccc; }
div.red {  background: #fcc;}
div.green {  background: #cfc;}
div.red.green {  background: #ccf;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
document.getElementById('ch1').onclick = function(){
  var cl = document.getElementById('cub').className;
  if(this.checked) {
        document.getElementById('cub').className =
        cl == 'green' ? 'red green' : 'red';
  } else {
    document.getElementById('cub').className =
        cl == 'red' ? 'gray' : 'green';
  }
}
 
document.getElementById('ch2').onclick = function(){
    var cl = document.getElementById('cub').className;
  if(this.checked){
        document.getElementById('cub').className =
        cl == 'red' ? 'red green' : 'green';
  } else {
    document.getElementById('cub').className =
        cl == 'green' ? 'gray' : 'red';
  }
}

HTML5
1
2
3
4
<div id="cub" class="gray">
</div>
<input type="checkbox" id="ch1">red<br>
<input type="checkbox" id="ch2">green

@Huge · 21.03.2017, 13:46 **[ТС]**

А при таком варианте работать будет?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div  align="center" class="tableCheckOrder">
 <table border="1" width="70%" style="margin-top: 20px">
        <tr th:each="customer : ${selected}"  class="changeColor">
            <td align="center">
                <span th:text="${customer.name}" >Name</span>
                </td>
            <td align="center">
                <span th:text="${customer.phone}">phone</span>
                </td>
            <td align="center">
                <span id="orderDate" th:text="${customer.date}">date</span>
               </td>
            <td align="center">
                    <input type="checkbox"  th:checked="${customer.recive}" id="receive" name="receive"/>
                <br/><span>  Цвет 1</span>
            </td>
            <td align="center">
                <input type="checkbox" th:checked="${customer.sentOrder}" id="sentOrder" name="sentOrder"/>
                <br/><span>  Цвет 2</span>
            </td>
        </tr>
</table>
</div>

Получается, что checkbox внутри табл цвет которой нужно изменить.

Добавлено через 13 минут
И если возможно, можете показать, что означает эта строчка в развернутом виде

JavaScript
1
 cl == 'green' ? 'gray' : 'red';

@Уф · 21.03.2017, 13:50

https://msdn.microsoft.com/ru-... s.94).aspx

@Huge · 21.03.2017, 15:04 **[ТС]**

за ответ спс, Уф мог бы ты подсказать как сделать:
1. Если в табл более одной <tr> ну а в табл. их поболее, то работает только первая строка. Как заставить его работать по всей табл? Судя по опыту предыдущих скриптов нужно использовать только className.
2. Если изначально один из checkbox checked, а так как они будут лететь с БД, то часть будет активна часть нет то те которые активны не работают.

@Уф · 21.03.2017, 19:41

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

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .

@Huge 3 / 3 / 14 Регистрация: 26.01.2016 Сообщений: 481

	Возможно ли изменение двух классов при использовании checkbox? 20.03.2017, 22:47. Показов 1050. Ответов 5 Метки нет (Все метки) Добрый день. Есть таблица, которая рисуется из Spring с помощью Thymeleaf и два checkbox в ней, нужно при нажатии первого checkbox(или если он активирован изначально), что бы поменялся class(в данном случае интересует цвет в таблице), при нажатии другого опять смена цвета, при чем что бы при загрузке было отслеживание нажаты оба, один или вообще нет. Как это лучше всего сделать, может у кого-то есть пример? Я так понимаю, что при помощи только CSS это сделать нельзя. 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	21.03.2017, 13:50
	https://msdn.microsoft.com/ru-... s.94).aspx 1

@Huge 3 / 3 / 14 Регистрация: 26.01.2016 Сообщений: 481
	21.03.2017, 15:04 [ТС]
	за ответ спс, Уф мог бы ты подсказать как сделать: 1. Если в табл более одной <tr> ну а в табл. их поболее, то работает только первая строка. Как заставить его работать по всей табл? Судя по опыту предыдущих скриптов нужно использовать только className. 2. Если изначально один из checkbox checked, а так как они будут лететь с БД, то часть будет активна часть нет то те которые активны не работают. 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	21.03.2017, 19:41
	при начальной загрузке придется проверять теми средствами которыми ты выводишь таблицу и чтобы сразу нужный класс писался 0