1

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

我有以下 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');
});

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

干杯，凯西

4

4 回答 4

3

尝试这个：

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

示例小提琴

于 2013-01-14T14:54:47.573 回答
2

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

现场演示

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

});
于 2013-01-14T14:55:58.147 回答
1

看到这个：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();
});
于 2013-01-14T14:59:49.473 回答
1 
$('input[name="feedback"]').on("change", function() {
  if $('input[name="feedback"]').val()=='Ja'
  {
    $('.text-feedback').css('display','block');
  } else {
    $('.text-feedback').css('display','none');
  }
});

作为记录，如果隐藏的类除了将显示设置为无并且不仅在这种情况下使用之外，其他答案在上下文中也是有意义的。如果它没有从 CSS 中丢失，并且按照我的布局控制显示。

于 2013-01-14T14:55:11.323 回答