Question

我有两个表：第一个显示，第二个隐藏。

在第一个表的第8行和第9行中选择“是”单选按钮时，我试图让第二个表出现。

如果在第一个表的第8行或第9行中选择了“No”单选按钮，则应隐藏第二个表。

这是我到目前为止所拥有的。

您可以看到演示here。

$(document).ready(function() {

    $("[name=texting_dur_school]").click(function() {
        $('#part2_question').show();
    });

});



<table width="100%" border="1" cellpadding="2" cellspacing="0">
  <tr>
    <td></td>
    <td><strong>Where has this happened?</strong></td>
    <td><strong>Yes</strong></td>
    <td><strong>No</strong></td>
  </tr>
  <tr>
    <td>1. </td>
    <td>cafeteria</td>
    <td><input type="radio" name="cafeteria" value="Yes" />
    </td>
    <td><input type="radio" name="cafeteria" value="No" />
    </td>
  </tr>
  <tr>
    <td>2. </td>
    <td bgcolor="#ddeeee">academic class</td>
    <td bgcolor="#ddeeee"><input type="radio" name="academic_class" value="Yes" />
    </td>
    <td bgcolor="#ddeeee"><input type="radio" name="academic_class" value="No" />
    </td>
  </tr>
  <tr>
    <td>3. </td>
    <td>before school</td>
    <td><input type="radio" name="before_school" value="Yes" />
    </td>
    <td><input type="radio" name="before_school" value="No" />
    </td>
  </tr>
  <tr>
    <td>4. </td>
    <td bgcolor="#ddeeee">bus</td>
    <td bgcolor="#ddeeee"><input type="radio" name="bus" value="Yes" />
    </td>
    <td bgcolor="#ddeeee"><input type="radio" name="bus" value="No" />
    </td>
  </tr>
  <tr>
    <td>5. </td>
    <td>after school</td>
    <td><input type="radio" name="after_school" value="Yes" />
    </td>
    <td><input type="radio" name="after_school" value="No" />
    </td>
  </tr>
  <tr>
    <td>6. </td>
    <td bgcolor="#ddeeee">hallway</td>
    <td bgcolor="#ddeeee"><input type="radio" name="hallway" value="Yes" />
    </td>
    <td bgcolor="#ddeeee"><input type="radio" name="hallway" value="No" />
    </td>
  </tr>
  <tr>
    <td>7. </td>
    <td>sporting events</td>
    <td><input type="radio" name="sporting_events" value="Yes" />
    </td>
    <td><input type="radio" name="sporting_events" value="No" />
    </td>
  </tr>
  <tr>
    <td>8. </td>
    <td bgcolor="red">online/texting during school</td>
    <td bgcolor="red"><input type="radio" name="texting_dur_school" value="Yes" />
    </td>
    <td bgcolor="red"><input type="radio" name="texting_dur_school" value="No" />
    </td>
  </tr>
  <tr>
    <td>9. </td>
    <td bgcolor="orange">online/texting outside of school</td>
    <td bgcolor="orange"><input type="radio" name="texting_out_school" value="Yes" />
    </td>
    <td bgcolor="orange"><input type="radio" name="texting_out_school" value="No" />
    </td>
  </tr>
</table>



<br />
<br />


<div id="part2_question" class="current" style="display:none">

    <table width="100%" border="1" cellpadding="2" cellspacing="0">
        <tr>
            <td><strong>Identify the online/texting programs.</strong></td>
            <td><strong>Yes</strong></td>
            <td><strong>No</strong></td>
        </tr>
        <tr>
            <td bgcolor="#ddeeee">Facebook</td>
            <td bgcolor="#ddeeee"><input type="radio" name="Facebook" value="Yes" /></td>
            <td bgcolor="#ddeeee"><input type="radio" name="Facebook" value="No" /></td>
        </tr>
        <tr>
            <td>Twitter</td>
            <td><input type="radio" name="Twitter" value="Yes" /></td>
            <td><input type="radio" name="Twitter" value="No" /></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="radio" name="Email" value="Yes" /></td>
            <td><input type="radio" name="Email" value="No" /></td>
        </tr>
        <tr>
            <td>Texting</td>
            <td><input type="radio" name="Texting" value="Yes" /></td>
            <td><input type="radio" name="Texting" value="No" /></td>
        </tr>
        <tr>
            <td bgcolor="#ddeeee">Online Gaming</td>
            <td bgcolor="#ddeeee"><input type="radio" name="Online_Gaming" value="Yes" /></td>
            <td bgcolor="#ddeeee"><input type="radio" name="Online_Gaming" value="No" /></td>
        </tr>
    </table>

</div>

Answer 1

我建议在类似于class="texting_question"之类的那些发短信的单选按钮问题上放一个课程然后你可以使用这样的东西：

$(document).ready(function() {

    $(".texting_question").click(function() {
        var hasYesAnswer = false;
        $(".texting_question:checked").each(function() {
            if ($(this).val() == "Yes") {
                hasYesAnswer = true;
            }
        });
        if (hasYesAnswer) {
            $('#part2_question').show();
        } else {
            $('#part2_question').hide();
        }
    });

});

它会将onclick函数绑定到所有单选按钮。每次单击其中一个时，它将查找所选的每个单选按钮并检查其值。如果其中任何一个设置为“是”，那么它将显示另一个表，否则它将隐藏它。

Answer 2

http://jsfiddle.net/JAAulde/nfmQF/5/

^^抓取所有无线电并指定一个点击，过滤那些已检查且值为yes的点击。如果该过滤产生了具有长度的集合，我们知道要显示。否则我们会隐藏。

Answer 3

$("[name=texting_dur_school]").click(function() {
    var texting_dur_school_val = $("input[name=texting_dur_school]:checked").val();
    var texting_out_school_val = $("input[name=texting_out_school]:checked").val();
    if(texting_dur_school_val == 'Yes' && texting_out_school_val == 'Yes'){
        $('#part2_question').show();
    } else if(texting_dur_school_val == 'No' && texting_out_school_val == 'No'){
        $('#part2_question').hide();
    }
});

Answer 4

 $("input[type='radio']:").click(function(){
       if($("table:eq(0) tr:gt(7) td:nth-child(3) input[type='radio']:checked").size() >= 1)
       {
           $("#part2_question").show();
       }
       if($("table:eq(0) tr:gt(7) td:nth-child(4) input[type='radio']:checked").size() == 2)
       {
           $("#part2_question").hide();
       }
 });

我没有在html代码上添加任何属性，因为我不想更改你的html代码 http://jsfiddle.net/joseadrian/nfmQF/7/

根据单选按钮显示和隐藏表格

4 个答案: