Есть множество input[type=checkbox], но один из них должен иметь поведение input[type=radio]. Это значит, что все чекбоксы имеют стандартное поведение, но при выборе того самого "особенного" чекбокса, все остальные должны сниматься и наоборот, если выбран "особенный", при выборе обычного, "особенный" становится не выбранным. Я мог бы сделать это с помощью общего name этих элементов, но ситуация усложняется тем, что name представляет собой массив (используются скобки []), потому простой выбор элементов группы затрудняется. Как сделать красиво данную фичу? Я не прошу писать за меня код, мне нужны только примерные приемы.
1 ответ
Проще сделать, чем объяснять все подробности. И да, рекомендую разобраться с тем как работает этот код, копипаст зло :)
$(document).ready(function() {
$('body').on('click', 'input[type=checkbox]:not(.special)', function() {
$('.special').attr('checked', false);
});
$('body').on('click', '.special', function() {
$('input[type=checkbox]:not(.special)').attr('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="option_1" />
<input type="checkbox" name="option_2" />
<input type="checkbox" name="option_3" />
<hr />
<input type="checkbox" class="special" name="option_special" />
-
Спасибо, я использовал вместо data аттрибута класс, что дало мне возможность использовать селектор :not, но пришлось добавить в селекторы еще и name, потому что у меня несколько групп таких хитрых селекторов. Дополнительно ситуация усложнена тем, что сами ческбоксы скрыты и вместо них отображаются стилизованные лейблы. Несколько раз наткнулся на рекурсию, потому что приходилось вызывать trigger('change'). Но все же я справился с помощью вашего решения. Спасибо.– ilyaplot14 июн 2016 в 13:50