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

Question

[kotey]

Доброго времени суток, уважаемые.
Есть предельно простой скрипт, который в зависимости от нажатой 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/

Answer 1

[Yevgeniy Kisselyov]

Добавьте на страницу

$(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();
 });

Comments

[kotey]

Простите, не совсем понял. В смысле "добавить на страницу"? Непосредственно в HEAD?
Не работает =(

Но если в файл JS (где все пибамбасы подключаются) добавить вот так:

$(window).load(function() {
	  $(function(){
checkRadioButtons();
 });
});

То работает. Правда притормаживает =(

UPD Впрочем, тормозит - фиг с ним, это из-за виджета. Хуже, что при очистке формы (без перезагрузки страницы). Радио-кнопка обнуляется, но класс active у блока не сбрасывается =(
Подскажите, пожалуйста, можно это как-то исправить?

[Yevgeniy Kisselyov]

kotey: По идее не важно куда добавить, главное после загрузки jQuery.
$(function(){
Не нужно оборачивать в
$(window).load(function() {
И то и другое отрабатывает после загрузки страницы.
Возможно изза этого и притормаживает.
Оставьте или:

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

Или

$(window).load(function() {
checkRadioButtons();
});

[kotey]

Yevgeniy Kisselyov: Спасибо большое! Действительно, если вынести из $(window).load(function() {}
То сначала проверяется кнопка и только потом загружается виджет. (Странно почему сразу в хеад не работало). Ну да фиг с ним.
Но вот при очистке формы без перезагрузки страницы (кнопкой reset) радиокнопка сбрасывается а стиль блока нет =(( Вот это печально.
Разве что... повесить reset снова функцию
$(function(){
checkRadioButtons();
});
наверное.

[kotey]

$("button.reset").click( function(){
checkRadioButtons();
});
Не работает =(
Что-то делаю не так.

[Yevgeniy Kisselyov]

kotey:
У кнопки reset есть класс reset?

$("button.reset").click( function(event){
    event.preventDefault();
   
    // или можно указать id формы пример: $('#formid').reset();
    // или так как ниже(если кнопка в форме находится)
   $(this).closest('form').get(0).reset();
    
    checkRadioButtons();
});

[kotey]

Да, конечно.

<button class="reset" type="reset">Очистить</button>

$("button.reset").click( function(){
			checkRadioButtons();
		});

Черт, только сейчас понял (когда на десять раз всё перепахал)! Она, тут кнопка, очищает класс ВТОРЫМ кликом. То есть, первый раз нажимаешь - очищает форму, кликаешь ВТОРОЙ раз - скидывает класс.
Выходит, что при первом клике она СНАЧАЛА функцию проверки запускает (а одна из радио-кнопок то ещё имеет чекед), а потом уже очищает форму. Ну а при втором клике, получается форма обнулена, ну и функция соответственно убирает класс.
Блин, как тут всё заморочено в этом JS!

Может сделать, чтобы reset не обнуляла ВСЕ радио-кнопки, а переключало на ту, что по умолчанию? Так даже лучше будет.

UPD Ой! Простите, только сейчас увидел, что вы фукнцию новую написали. Да, вот так

$("button.reset").click( function(event){
    event.preventDefault();
   
    // или можно указать id формы пример: $('#formid').reset();
    // или так как ниже(если кнопка в форме находится)
   $(this).closest('form').get(0).reset();
    
    checkRadioButtons();
});

Всё работает! Спасибо огромное!
Сейчас попробую ещё перевод на "по умолчанию" сделать и будет вообще замечательно.

[kotey]

Урра! Я таки её побЮдил!
Вон чего вышло

$("button.reset").click( function(event){
    event.preventDefault();
   $(this).closest('form').get(0).reset();
   $("#econom").attr('checked', 'checked'); // переключаем на первую кнопку
    checkRadioButtons();
});

Ещё раз огромное спасибо!