jquery - 基于单选按钮显示和隐藏表格

Question

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

我试图在第一个表的第 8 行和第 9 行中选择"is"单选按钮时显示第二个表。

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

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

您可以查看演示 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 函数绑定(bind)到所有单选按钮。每次单击其中一个按钮时，它将查找选定的每个单选按钮并检查它们的值。如果其中任何一个设置为"is"，那么它将显示另一个表，否则它将隐藏它。