onchange не работает с переключателем - PullRequest
Новая
       19

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

10 голосов
/ 25 января 2011

У меня есть несколько радио-кнопок, которые должны вызывать 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

Моя функция хидера в данный момент работает:

Ответы [ 7 ]

7 голосов
/ 03 августа 2013

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

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

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

$("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, так как оно не сработает, когда ввод активирован с помощью клавиатуры.

3 голосов
/ 25 января 2011

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

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

<input name="ostype" type="radio" value="0" onclick="hider(this);">solaris
0 голосов
/ 18 августа 2014

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

$(function(){

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

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

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

}

0 голосов
/ 28 ноября 2012

Если я вас правильно понимаю, вы можете просто нажать 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.

0 голосов
/ 25 января 2011

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

0 голосов
/ 25 января 2011 
<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 в вызовах функций

0 голосов
/ 25 января 2011

Вот версия, из которой вы можете черпать вдохновение (проверено на 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>
...