Question

我有一个Html代码

      <li>
            <ul>
               <li id="6"><input type="radio" name="sell" value="sell" id="sell" />Sell</li>
               <li id="7"><input type="radio" name="rent" value="rent" id="rent" />Rent</li>
       <li id="8"><input type="radio" name="donate" value="donate" id="donate" />Donate</li>
             </ul>


            <div id="selltab" style="display:none;">
       eeeeeeeee
    </div>
    <div id="renttab" style="display:none;">
       ffffffffff
    </div>
       <div id="donatetab" style="display:none;">
       ggggggggg
       </div>

 </li>

我需要在点击相应的单选按钮时显示每个div，否则它应该被隐藏。现在我已经编写了一个javascript，但它无法正常工作。

     $(document).ready(function(){
    $("radio[@name='sell']").click(function(){

        if ($("radio[@name='sell']:checked").val() == 'sell')
            $("#selltab").css("display","block");

    });


});

这是写t测试点击销售价格的单选按钮时是否可以显示...但似乎有些错误...

Answer 1

通过使用切换功能，您可以执行此操作。

$('#selltab').hide();
$('#renttab').hide();

$('input[name=sell]').click(function(){
   $('#selltab').toggle();
})
$('input[name=rent]').click(function(){
    $('#renttab').toggle();
})

Answer 2

我认为这就是你想要的：http://jsfiddle.net/Wsg3q/

<form>
  <input type="radio" name="group" value="sell" id="sell" /> sell <br/>
  <input type="radio" name="group" value="rent" id="rent" /> rent <br/>
  <input type="radio" name="group" value="donate" id="donate" /> donate <br/>
</form>

<div id="selltab" >
   eeeeeeeee
</div>
<div id="renttab" >
   ffffffffff
</div>
<div id="donatetab" >
   ggggggggg
</div>

Javascript：

$('div').hide();

$("input[name=group]:radio").change(function() {
     $( '#' + $(this).attr('id') + 'tab' ).show();
    $('div:not(#' + $(this).attr('id') + 'tab)' ).hide();
});

单击单选按钮上的div显示

2 个答案: