@kotey

Как проверить нажата ли radio-кнопка при загрузке страницы?

Доброго времени суток, уважаемые.
Есть предельно простой скрипт, который в зависимости от нажатой radio-кнопки добавляет блоку класс active (отображает на странице). Проблема в том. что он завязан на функцию change и соответственно при загрузке/обновлении страницы не срабатывает.
Подскажите, пожалуйста нубу, как заставить его проверять положение кнопки?
css
.auto_select {display: none;}
.auto_select.active {	display: block;}

html
<form class="order_tab" id="calc" action="/" method="post">
	<input type="radio" class="checkbox" id="econom" name="radio" checked />
	<input type="radio" class="checkbox" id="unive" name="radio"/>
	<input type="radio" class="checkbox" id="mini" name="radio" />
</form>	

<div class="autoblock">
			<div class="auto_select" id="econom">Первый!</div>	
			<div class="auto_select" id="unive">Второй!</div>
			<div class="auto_select" id="mini">Третий!</div>
	</div>

javascript
$(".checkbox").change( function(){

		if(	$("#unive").prop("checked") ) 
		{	$('.autoblock #unive').addClass('active'); } 
		else {$('.autoblock #unive').removeClass('active');	}

		if(	$("#econom").prop("checked") ) 
		{	$('.autoblock #econom').addClass('active'); } 
		else { $('.autoblock #econom').removeClass('active'); }

		if(	$("#mini").prop("checked") ) 
		{	$('.autoblock #mini').addClass('active'); } 
		else { $('.autoblock #mini').removeClass('active'); }

	});

https://jsfiddle.net/KatSSS/x2egjqux/
  • Вопрос задан
  • 1353 просмотра
Решения вопроса 1
ewgenio
@ewgenio
Всё по чуть чуть
Добавьте на страницу
$(function(){
    if(	$("#unive").prop("checked") ) 
    {	$('.autoblock #unive').addClass('active'); } 
    else {$('.autoblock #unive').removeClass('active');	}

    if(	$("#econom").prop("checked") ) 
    {	$('.autoblock #econom').addClass('active'); } 
    else { $('.autoblock #econom').removeClass('active'); }

    if(	$("#mini").prop("checked") ) 
    {	$('.autoblock #mini').addClass('active'); } 
    else { $('.autoblock #mini').removeClass('active'); }
});


UPD:
А лучше чтоб код не повторять - запилить его в функцию и вызывать где нужно
function checkRadioButtons()
{
    if(	$("#unive").prop("checked") ) 
    {	$('.autoblock #unive').addClass('active'); } 
    else {$('.autoblock #unive').removeClass('active');	}

    if(	$("#econom").prop("checked") ) 
    {	$('.autoblock #econom').addClass('active'); } 
    else { $('.autoblock #econom').removeClass('active'); }

    if(	$("#mini").prop("checked") ) 
    {	$('.autoblock #mini').addClass('active'); } 
    else { $('.autoblock #mini').removeClass('active'); }
}

    $(function(){
checkRadioButtons();
 });

$(".checkbox").change( function(){
checkRadioButtons();
 });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы