Мне нужно сделать что-то довольно простое и проверить, установлен ли флажок checked, и если это был класс, нужно добавить к нему, чтобы я мог применить несколько стилей.

<form action='' method='POST'>
    <input type="checkbox" name="checkbox[]">User1
    <input type="checkbox" name="checkbox[]">User2
</form>

Проблема в том, что я не знаю, как узнать, установлен ли флажок в jQuery.

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
if (atLeastOneIsChecked) {
  $('tr > td').addClass('colorify');
}

JSFiddle

0
dwvaxaz 21 Ноя 2014 в 04:54
Ваш код правильный, вам просто нужно запустить его в обработчике флажков .change(), а не при загрузке страницы.
 – 
Barmar
21 Ноя 2014 в 04:58
Я не могу заставить его работать. Не могли бы вы взглянуть на ссылку jsfiddle?
 – 
dwvaxaz
21 Ноя 2014 в 05:02

3 ответа

Лучший ответ

Вам необходимо запустить код в обработчике .change или .click для флажка. Затем вы можете использовать this.checked, чтобы проверить, установлен ли этот флажок. Затем вы используете функции обхода DOM, чтобы найти элементы td в этой строке и применить класс.

$('input[name="checkbox[]"]').change(function () {
    $(this).closest('tr').find('td').toggleClass('colorify', this.checked);
});

Я использовал toggleClass, так что класс будет удален, если нет флажков.

Обновлен JSFiddle

2
Barmar 21 Ноя 2014 в 05:10
Это применяет стиль ко всем строкам. Мне нужно применить его только к тем, которые были проверены.
 – 
dwvaxaz
21 Ноя 2014 в 05:06
Если это то, что вы хотели, почему вы только проверяете, проверен ли хотя бы один?
 – 
Barmar
21 Ноя 2014 в 05:08
Еще один вопрос. Как сохранить изменения и добавление класса? Например, с помощью кнопки.
 – 
dwvaxaz
21 Ноя 2014 в 05:17
Используйте AJAX для отправки на сервер. Классы не отправляются на сервер как часть формы, вам нужно будет написать собственный код, который преобразует их в данные, чтобы сохранить их.
 – 
Barmar
21 Ноя 2014 в 05:20

Я использую этот javascript. Итак, если флажок установлен, он добавит раскраску класса в tr

$("input[type='checkbox']").change(function(){
    if (this.checked)
    {
        $(this).parents("tr").addClass('colorify');
    }
    else
    {
        $(this).parents("tr").removeClass('colorify');
    }
});
0
Adriansyah 21 Ноя 2014 в 05:08

Следующее должно решить ваши проблемы:

function updateRowColor() {
    $(this).closest('tr').find('td').toggleClass('colorify', this.checked);
}

// Update on page load
$('input:checked').each(updateRowColor);

// Listen for change on the element
$('input').on('change', updateRowColor);
0
nickspiel 21 Ноя 2014 в 05:13