onchange не работает с переключателем

У меня есть несколько радиокнопок, которые должны вызывать hider(что-то); когда они меняются, то есть когда они отмечены или не отмечены. Это работает, т. Е. При проверке они вызывают функцию JS, однако, если они не отмечены из-за выбора другой радиокнопки из этой группы, он больше не вызывает сценарий js.

Нужно ли использовать что-то еще, кроме onchange?

Вот как выглядят переключатели на данный момент:

<input name="ostype" type="radio" value="0" onchange="hider(solaris);">solaris
<input name="ostype" type="radio" value="1" onchange="hider(linux);">linux

Моя функция хидера в настоящее время:

function hider(divid) {
 if ($(divid).is('.hidden')) {
  $(divid).removeClass('hidden');
 } else {
  $(divid).addClass('hidden');
 }
}
Источник

7 ответов

Решение

Поскольку этот вопрос до сих пор не получил правильного ответа, но в Google он занимает довольно высокое место по значению "переключение радиокнопок", вот подходящее решение для тех, кто все еще ищет.

Если вы используете jQuery, просто используйте селектор атрибутов jQuery, как отметил Flavius ​​Stef.

ОП, не совсем понятно, что делает ваш код. Давайте предположим, что в вашем коде вы хотите добавить "скрытый" класс к любой активной радиокнопке.

$("your selector here").change(function() {
    $('input[name="' + this.name + '"]').removeClass("hidden");

    $(this).addClass("hidden");
});

Обратите внимание на разницу между $(this) (объект jQuery) и this (объект DOM). По сути, я удаляю "скрытый" класс из каждого ввода, имеющего одно и то же имя, а затем добавляю "скрытый" класс к текущему вводу.

Конечно, я предполагаю, что вы не используете повторяющиеся имена для разных входов на странице. Также обратите внимание, что это будет работать только для переключателей, поскольку событие "изменить" переключателя срабатывает только при активации, а не при отключении.

Прослушивание для обмена на обоих флажках и переключателях

В моем случае я хотел добавить "проверенный" класс к активным переключателям и флажкам. Поскольку флажок запускает событие "onchange" как при включении, так и при снятии флажка, мне потребовалось немного дополнительного кода.

$('input[type="radio"]').change(function() {
    $('input[name="' + this.name + '"]').removeClass("checked");
    $(this).addClass("checked");
});

$('input[type="checkbox"]').change(function() {
    $(this).toggleClass("checked", ($(this).is(":checked")));
});

Последняя функция использует toggleClass для установки "проверенного" класса, если .is(":checked") является true,

В качестве альтернативы вы можете захотеть объединить две функции в нечто вроде:

$('input[type="radio"], input[type="checkbox"]').change(function() {
    if(this.type == "radio")
        $('input[name="' + this.name + '"]').removeClass("checked");

    $(this).toggleClass("checked", ($(this).is(":checked")));
});

В любом случае, всегда будьте осторожны при прослушивании события onclick, так как оно не сработает, когда ввод активируется через навигацию с помощью клавиатуры.

Источник

Использование onclick,

Также в качестве аргумента вашего вызова функции вам нужно будет либо использовать строку с идентификатором в качестве селектора jQuery ('#solaris') - еще лучше использовать this:

<input name="ostype" type="radio" value="0" onclick="hider(this);">solaris
Источник

Привязать событие изменения ко ВСЕМ переключателям на документе готово:

$(function(){

   $('input[name=list_type]:radio').on("change", function(){   
       showHideBlock();
   });
   showHideBlock();    
});

Показать - скрыть блок зависит от состояния ОДНОГО переключателя:

function showHideBlock(){
   if ($("#Option").is(':checked')){
       $('#Block').show();
   } else {
       $('#Block').hide();
   }

}

Источник 
<input name="ostype" type="radio" value="0" onclick="hider('solaris');">solaris
<input name="ostype" type="radio" value="1" onclick="hider('linux');">linux
function hider(divid) {
 $( 'div.div_class' ).hide();
 $( '#' + divid ).show();
}

Убедитесь, что вы добавили класс для вызова div и убедитесь, что вы помещаете кавычки вокруг Solaris и Linux в вызовах функций.

Источник

Вот версия, из которой вы можете черпать вдохновение (протестировано на Chrome и FF):

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
</head>
<body>
<input type="radio" name="ostype" checked="checked" onclick="hider('linux')">linux
<input type="radio" name="ostype" onclick="hider('solaris');">solaris

<div id="content">
        <div id="linux">linux</div>
        <div id="solaris" style="display:none;">solaris</div>
</div>
<script>
function hider(divname) {
        $('#content div').each(function(){
                $(this).hide(); 
        });

        $('#'+divname).show();
}
</script>
</body>
</html>
Источник

Если я вас правильно понимаю, вы можете просто использовать onClick на каждой кнопке и скрывать другие, показывая ту, на которую вы нажимаете. Как это:

function showInfo(info)
    {
        var info = document.getElementById("1");
        info.style.display = "block";

        var info = document.getElementById("2");
        info.style.display = "none";

        }

Итак, первый показывает, а второй скрывается. Затем просто добавьте один для каждого div, который должен быть скрыт.

Вы также можете сделать это с помощью jQuery.

function showAndHide(val1, val2)
        {
        $(val1).hide();
        $(val2).show();
        }

И не забывайте иметь стиль ="display:none" в каждом div.

Источник

Вы объявили Vars Solaris и Linux? в противном случае ваш браузер должен показать вам ошибку

Источник
Другие вопросы по тегам