jQuery - 基于单选按钮选择显示 div

Question

可能的解决方案，但无法使其发挥作用：

$(function(){
  $('input[name="q10"]').click(function(){
    if ($(this).is(':checked'))
    {
    var flag=0;

    $("input[type='radio']:checked").each(function() {
      if($(this).val()==1 || $(this).val()==2 ){
        $("#disagree").show();
         flag++;
      }
      else if(($(this).val()==3 || $(this).val()==4) && flag==0)
        $("#agree").show();
    });
    }
  });
});

我有一个包含 10 个问题的页面 - 每个问题都有一个回答量表，如下所示：

<div id="rq1" class="row" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
<div class="col1">1.</div>
<div class="col2a">Question text</div>
<div class='colans'>
      <input  name='q1' value='4' id='q1a4' type='radio' onclick='mand();' />
</div>
<div class='colans'>
      <input  name='q1' value='3' id='q1a3' type='radio' onclick='mand();' />
</div>
<div class='colans'>
      <input  name='q1' value='2' id='q1a2' type='radio' onclick='mand();' />
</div>
<div class='colans'>
      <input  name='q1' value='1' id='q1a1' type='radio' onclick='mand();' />
</div>
<div class='colans'>
      <input  name='q1' value='-1' id='q1a-1' type='radio' onclick='mand();' />
</div>
</div>

以上 10 个问题中的每一个都重复了 q1 到 q10。

在 10 个问题的末尾，我有两个textareas，用户可以在其中编写 cmets，但是，如果用户选择 ANY 响应，则需要出现第一个 textarea，其值为2 或 1。如果用户选择了值为 4 或 3 的 ANY 响应，但未选择值为 2 或 1 的响应，则需要显示第二个 textarea。

最后，一旦用户回答了最后一个问题，即问题 10，我需要运行 jQuery——此时我需要触发代码。

过去，我为每个响应手动创建了 Javascript 代码并进行了检查，但我想知道是否有使用 jQuery 的更简洁、更简洁的方式？

Answer 1

好吧，我没有很好地格式化代码，但我想这会对你有所帮助。此外，我检查了给出的最后一个答案，我想每次访问这个对象都不是一个好主意。但这只是我的意见。一切顺利:-)

`var myradio = $('input[name=nettype]');
var nettype = myradio.filter(':checked').val();

if(nettype ==1 || nettype ==2 )
{
 $("#myTextArea1").show();
 $("#myTextArea2").hide();
}
else if(nettype ==3 || nettype == 4 )
{
 $("#myTextArea2").show();
 $("#myTextArea1").hide();
}`

对于您添加到上一个答案的评论，您可以添加以下代码

`if ( $('.myClass').filter(function(){
    return $(this).val() != '';
    }).length == 0
 )
 {
  /* code to run when all are empty */

 }`

您可以将这个类名 myClass 添加到您的文本框中，这样当所有文本框都被回答时，您就可以触发单选按钮的代码。 :-)

Answer 2

var flag=0;

$("input[type='radio']:checked").each(function() {
  if($(this).val()==1 || $(this).val()==2 ){
    $("#myTextArea1").show();
     flag++;
  }
  else if(($(this).val()==3 || $(this).val()==4) && flag==0)
    $("#myTextArea2").show();
});

回答最后一个问题时触发此代码！！

更新： 这是完整的代码...

 $(document).ready(function() {

   $("#disagree").hide();
   $("#agree").hide();

   $("input[name='q10']").click(function() {

    $("#disagree").hide();
    $("#agree").hide();

    var flag=0;

    $("input[type='radio']:checked").each(function() {

       if($(this).val()==1 || $(this).val()==2 ){

           $("#disagree").show();
           $("#agree").hide();
           flag++;
       }

      else if(($(this).val()==3 || $(this).val()==4) && flag==0)

           $("#agree").show();
   });
 });    
});