CODEWITHSUNDEEP
jqueryhtml-tableradio-button
Mike E
Mike E

Reputation: 31

Show and hide table based on radio button

I have two tables: the first is shown and the second is hidden.

I'm trying to get the second table to appear when either "Yes" radio button is chosen in rows 8 and 9 of the first table.

If both "No" radio buttons are chosen in rows 8 or 9 from the first table, the second table should be hidden.

Here's what I have so far.

You can see a demo 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>

Upvotes: 1

Views: 4704

Answers (4)

ahgood
ahgood

Reputation: 1937

$("[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();
    }
});

Upvotes: 0

Joseadrian
Joseadrian

Reputation: 4374

 $("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();
       }
 });

I didn't add any attribute on the html code because i didn't want to change your html code http://jsfiddle.net/joseadrian/nfmQF/7/

Upvotes: 0

JAAulde
JAAulde

Reputation: 19560

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

^^ Grabs all radios and assigns a click which filters for those which are checked and have value of yes. If that filtering results in a collection with length, we know to show. Otherwise we hide.

Upvotes: 1

Kenny Wyland
Kenny Wyland

Reputation: 21870

I would suggest putting a class on those texting radio button questions called something like class="texting_question" and then you could use something like this:

$(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();
        }
    });

});

It will bind an onclick function to all of the radio buttons. Every time one of them is clicked, it will lookup each of the radio buttons that are selected and check their values. If any of them are set to "Yes" then it will show the other table, else it will hide it.

Upvotes: 2

Related Questions