如果选中单选按钮显示div

时间:2015-06-09 11:03:48

标签: javascript hide show radio

我的HTML CODE如下:



$('input[type="radio"]').click(function(){
  
  if($(this).attr("value")=="ABC"){
    $(".Box").hide('slow');
  }
  if($(this).attr("value")=="PQR"){
    $(".Box").show('slow');

  }        
});

<table>
  <tr>
    <td align="left" height="45">

      <input type="radio" class="radioBtn" name="Radio" 
             id="Radio" value="ABC" required>
      ABC

      <input class="radioBtn" type="radio" name="Radio" 
             id="Radio" value="PQR"  required>
      PQR

      <div class="Box" style="display:none">Text</div>
    </td>
  </tr>
</table>
&#13;
&#13;
&#13;

以上所有代码都运行良好&amp;正常。但我的问题是,当我默认选中PQR时,Box div应显示单击单选按钮。我的代码有什么问题或需要改变什么.. ??

2 个答案:

答案 0 :(得分:2)

您需要trigger click

$(document).ready(function () {

    $('input[type="radio"]').click(function () {
        if ($(this).attr("value") == "ABC") {
            $(".Box").hide('slow');
        }
        if ($(this).attr("value") == "PQR") {
            $(".Box").show('slow');

        }
    });

    $('input[type="radio"]').trigger('click');  // trigger the event
});

<强> DEMO

答案 1 :(得分:0)

我对你的陈述所理解的内容如下:

<input class="radioBtn" type="radio" name="Radio" id="Radio" value="PQR" checked>

意味着你默认检查你的PQR ......如果是这样..那么下面的解决方案对你来说也可以正常工作......

我不是很好javascript但是..希望这个帮助..

$(document).ready(function(){

if($('input[name="Radio"]').attr("value")=="PQR"){
  $(".Box").show('slow');
}
if($('input[name="Radio"]').attr("value")=="ABC"){
  $(".Box").hide('slow');
}

$('input[type="radio"]').click(function(){
    if($(this).attr("value")=="ABC"){
        $(".Box").hide('slow');
    }
    if($(this).attr("value")=="PQR"){
        $(".Box").show('slow');

    }        
});
});