使用jQuery选择单选按钮时显示textblock

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

我有以下的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

来源

2013-01-14 Kessi

试试这个：

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

Example fiddle

来源

2013-01-14 14:54:47

如果单选按钮虽然再次改变这不会切换回可见。 –

好点，修改。 –

$('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-14 14:55:11

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

Live Demo

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

});

来源

2013-01-14 14:55:58 Adil

谢谢阿迪尔。我是一个jQuery新手。这工作就像一个魅力...谢谢。 – Kessi

看到这个：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-14 14:59:49 Anujith

使用jQuery选择单选按钮时显示textblock

回答

相关问题