Question

我对jQuery和两个radiobutton有一个小挑战。我喜欢在选择radiobutton时显示文本块，并在选择其他radiobutton时隐藏相同的文本块。初始状态是不显示文本块。

我有以下HTML代码：

<span class="radiogroupline"><input type="radio" name="feedback" id="Ja" value="Ja">
<label for="Ja">Ja</label></span>
<span class="radiogroupline"><input type="radio" name="feedback" id="Nee"   class="feedback" value="Nee">
<label for="Nee">Nee</label></span>
<div class="text-feedback hidden">Dynamisch textblok</div>

我写了以下jQuery：

$('input[name="feedback"]').on("change", function() {
    $('.text-feedback').removeClass('hidden');
});

现在的挑战是如何在选择第二个单选按钮时仅显示文本块，并在选择第一个单选按钮时隐藏...希望有人可以帮助我吗？

干杯， Kessi

Answer 1

试试这个：

$('input[name="feedback"]').on("change", function() {
    if ($(this).val() == 'Nee') {
        $('.text-feedback').removeClass('hidden');
    }
    else {
        $('.text-feedback').addClass('hidden');
    }
});

Example fiddle

Answer 2

由于您有两个元素的单个事件处理程序，您需要识别它们并将条件放在一个元素上显示单击并隐藏其他元素单击。

<强> Live Demo

$('input[name="feedback"]').on("change", function(event) {
    if(event.target.id == 'Ja')      
    $('.text-feedback').removeClass('hidden');
    else
    $('.text-feedback').addClass('hidden');

});

Answer 3

$('input[name="feedback"]').on("change", function() {
  if $('input[name="feedback"]').val()=='Ja'
  {
    $('.text-feedback').css('display','block');
  } else {
    $('.text-feedback').css('display','none');
  }
});

对于记录，其他答案在上下文中是有意义的，如果隐藏的类除了将display设置为none之外还执行其他操作并且不仅用于此类实例。如果它没有从CSS中丢失它，只是控制我已经布局的显示。

Answer 4

请参阅：http://jsfiddle.net/223PN/1/

<span class="radiogroupline"><input type="radio" name="feedback"   id="Ja" value="Ja" >
<label for="Ja" >Ja</label></span>
<span class="radiogroupline"><input type="radio" name="feedback" id="Nee"   class="feedback" value="Nee" checked>
<label for="Nee">Nee</label></span>
<div class="text-feedback hidden">Dynamisch textblok</div>

jQuery的：

$('input[name="feedback"]').on("change", function() {
  $('.text-feedback').fadeToggle();
});

使用jQuery选择单选按钮时显示文本块

4 个答案: