Как использовать jQuery для показывания/скрытия отделений на основе выбора переключателя?

Question

Как использовать jQuery для показывания/скрытия отделений на основе выбора переключателя?

У меня есть некоторые переключатели, и я хотел бы сделать, чтобы различные скрытые отделения обнаружились, на основе которого устанавливается переключатель. Вот то, на что похож HTML:

<form name="form1" id="my_form" method="post" action="">
    <div><label><input type="radio" name="group1" value="opt1">opt1</label></div>  
    <div><label><input type="radio" name="group1" value="opt2">opt2</label></div>  
    <div><label><input type="radio" name="group1" value="opt3">opt3</label></div>  
    <input type="submit" value="Submit">
</form>

....

<style type="text/css">
    .desc { display: none; }
</style>

....

<div id="opt1" class="desc">lorem ipsum dolor</div>
<div id="opt2" class="desc">consectetur adipisicing</div>
<div id="opt3" class="desc">sed do eiusmod tempor</div>

И вот мой jQuery:

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() {
        var test = $(this).val();
        $("#"+test).show();
    }); 
});

Причина я делаю его тот путь, состоит в том, потому что мои переключатели и отделения сгенерированы динамично (значение переключателя будет всегда иметь соответствующее отделение). Код выше работ частично - отделения покажут, когда корректная кнопка будет проверена, но я должен добавить в некотором коде, чтобы заставить отделения скрыться снова, после того как кнопка неконтролируема.Спасибо!

35

jquery radio-button mouseclick-event

задан ApproachingDarknessFish 20 October 2015 в 04:30

2 ответа

Просто скройте их, прежде чем показывать:

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#"+test).show();
    }); 
});

39

ответ дан 27 November 2019 в 06:32

Другие вопросы по тегам:

jquery radio-button mouseclick-event

Похожие вопросы:

score 45 · Accepted Answer

Обновление 2015/06

Поскольку jQuery развивался с момента публикации вопроса, рекомендуемый подход теперь - использование $.on

$(document).ready(function() {
    $("input[name=group2]").on( "change", function() {

         var test = $(this).val();
         $(".desc").hide();
         $("#"+test).show();
    } );
});

или вне $.ready()

$(document).on( "change", "input[name=group2]", function() { ... } );

Оригинальный ответ

Вы должны использовать .change() обработчик события:

$(document).ready(function(){ 
    $("input[name=group2]").change(function() {
        var test = $(this).val();
        $(".desc").hide();
        $("#"+test).show();
    }); 
});

должно работать