<body>
<div class="wrapper">
<form action="#" class="block-form">
<div class="block-form__title">Form style</div>
<div class="block-form__input">
<div class="checkbox">
Первый выключючатель
<input type="checkbox" checked name="namechekbox_1">
</div>
<div class="checkbox">
Второй выключючатель
<input type="checkbox" name="namechekbox_2">
</div>
</div>
<div class="block-form__input">
<div class="radiobittons">
<div class="radiobuttons__item">
Вариант 1
<input type="radio" value="1" checked name="nameradio">
</div>
<div class="radiobuttons__item">
Вариант 2
<input type="radio" value="2" name="nameradio">
</div>
<div class="radiobuttons__item">
Вариант 3
<input type="radio" value="3" name="nameradio">
</div>
</div>
</div>
<button type="submit" class="button"><span>
Отправить форму
</span></button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/script.js"></script>
</body>
$(document).ready(function () {
//checkbox
$.each($('.checkbox'), function () {
if ($(this).find('input').prop('checked') == true) {
$(this).addClass('active');
};
});
$(document).on('click', '.checkbox', function () {
if ($(this).hasClass('active')) {
$(this).find('input').prop('checked', false);
} else {
$(this).find('input').prop('checked', true);
};
$(this).toggleClass('active');
return false;
});
//кнопка радио
$.each($('.radiobuttons__item'), function () {
if ($(this).find('input').prop('checked') == true) {
$(this).addClass('active');
}
});
$(document).on('click', '.radiobuttons__item', function () {
$(this).parents('.radiobuttons').find('.radiobuttons__item').removeClass('active');
$(this).parents('.radiobuttons').find('.radiobuttons__item input').prop('cheked', false);
$(this).toggleClass('active');
$(this).find('input').prop('checked', false);
return false;
});
});
Простой
