如果选中单选按钮显示 div

Question

我有 HTML 代码如下：

$('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>

以上所有代码都工作正常。但我的问题是，当我默认检查 PQR 时，Box div 应该显示为单击单选按钮。我的代码有什么问题或需要进行哪些更改..??

Answer 1

你需要 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

Answer 2

我对你这句话的理解如下：

<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');

    }        
});
});

如果选中单选按钮显示 div

If Radio button checked show div

javascript

show

hide

radio