Question

我有2个单选按钮，我想要显示或隐藏2个不同的选项字段。

<p id="proposition">
      <label for='propositionC'>choice : </label>
      <input type="radio" name="rep" value="yes" id="yes" required/>Yes
      <input type="radio" name="rep" value="no" id="no" />NO
</p>

这就是我试图改变它的方式：

if (reason==6)
        {
            $("#proposition").slideDown('fast');
            var choice =  $('input[name=rep]:checked','#proposition').val();
            if(choice =="yes")
            {
                $("#pCr").hide();
                $("#pBq").slideDown('fast');
            }
          else if(choice =="no")
           {
                $("#pBq").hide();
                $("#pCr").slideDown('fast'); 
           }
        }

此代码不稳定，因为它只能在第一次工作，但是当我将“是”更改为“否”时，例如它被阻止

Answer 1

问题是因为您只在页面加载时检查一次值。

要解决此问题，您需要为两个单选按钮添加一个change事件处理程序，并将相应的逻辑放在其中：

var reason = 6;
if (reason == 6) {
  $("#proposition").slideDown('fast');
}

// somewhere else in your logic..
$('input[name=rep]').change(function() {
  if ($(this).val() == "yes") {
    $("#pCr").hide();
    $("#pBq").slideDown('fast');
  } else {
    $("#pBq").hide();
    $("#pCr").slideDown('fast');
  }
});

#proposition, #pCr, #pBq { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="proposition">
  <label for='propositionC'>choice : </label>
  <input type="radio" name="rep" value="yes" id="yes" required/>Yes
  <input type="radio" name="rep" value="no" id="no" />NO
</p>

<div id="pCr">pCr</div>
<div id="pBq">pBq</div>

Answer 2

您是否记录了$('input[name=rep]:checked','#proposition').val()返回的内容？我猜这不是你所期待的，因为你给它两个选择器。试试$('input[name=rep]:checked').val()

抓一点。经过一个快速的小提琴，我意识到你的代码检查。您是否在代码中的其他位置绑定了一个绑定，以便在单击它们时检查您的输入，而不仅仅是在首次加载时？

$("#proposition")
  .slideDown('fast')
  .find('input[name=rep]')
    .on('click', function() {
      var choice =  this.value;

      if (reason === 6) {
        if(choice =="yes") {
          $("#pCr").hide();
          $("#pBq").slideDown('fast');
        } else if(choice =="no") {
          $("#pBq").hide();
          $("#pCr").slideDown('fast'); 
         }
       }
    });

根据单选按钮动态显示或隐藏字段

2 个答案: