Show/hide div using radio buttons with jquery mobile - php

Question

Ok here is my problem, and all of my 'dirty' code. This isn't my production code but just trying to make it work at the moment.
Basically what I need is when a user selects the Not Ok radio button it displays the textarea for that unique set which it doesn't do right now when I select Not Ok it gives the textarea's for all the entries which right now is about 13 sets of questions that get generated dynamically from a mysql database at the moment. I have a feeling it has to do something with unique id's that are either in the wrong place in my code now, or just simply aren't there at all. Any help is appreciated greatly.
<div data-role="collapsible" data-theme="b" data-content-theme="c">
<h3>Vehicle Check Information</h3>
<?php
$query = mysql_query("SELECT * FROM vehicle_q");
while($row = mysql_fetch_array($query)) {
$q_title = $row['title'];
$q_id = $row['id'];
?>
<div data-role="fieldcontain" style="border:0;">
<fieldset data-role="controlgroup">
<legend><?php echo $q_title; ?>:</legend>
<input type="radio" name="help[]" id="checkbox-1a" value="Ok" />
<label for="checkbox-1a">Ok</label>
<input type="radio" name="help[]" id="checkbox-2a" value="Not Ok" />
<label for="checkbox-2a">Not Ok</label>
</fieldset>
<div id="hidden_text-<?php echo $q_id; ?>" style="display:none;">
<script>
$(document).ready(function(){
$(":radio:eq(1)").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").show(500);
});
$(":radio:eq(0)").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").hide(500);
});
});
</script>
<fieldset data-role="fieldcontain">
<label for="<?php echo $q_title; ?>_t">Explain the Deficiency(If any):</label>
<textarea name="text_a[]" id="<?php echo $q_title; ?>_t"></textarea>
</fieldset>
</div>
</div>
<input type="hidden" name="q_title1[]" value="<?php echo $q_title; ?>" />
<?php
}
?>
</div>

Answer 1

The other 2 answers are ways to fix your issue. As a side, here is possibly why it is happening. When you are using -
$(":radio:eq(1)").click(function()
$(":radio:eq(0)").click(function()
You are using a click listener that just checks for if 'any' radio button with that index position was clicked on your page. So any button with 1 index position will make every $(":radio:eq(1)").click(function() execute.
Edit -
You would want to change your radio button ids, as (1) they will not be unique as you repeat them with each while() loop, and (2) you could use it to check if that specific radio buttton was clicked.
Try changing it to -
...
<input type="radio" name="help[]" id="checkbox-1a-<?php echo $q_id; ?>" value="Ok" />
<label for="checkbox-1a">Ok</label>
<input type="radio" name="help[]" id="checkbox-2a-<?php echo $q_id; ?>" value="Not Ok" />
<label for="checkbox-2a">Not Ok</label>
</fieldset>
<div id="hidden_text-<?php echo $q_id; ?>" style="display:none;">
<script>
$(document).ready(function(){
$("#checkbox-2a-<?php echo $q_id; ?>").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").show(500);
});
$("#checkbox-1a-<?php echo $q_id; ?>").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").hide(500);
});
});
</script>

Answer 2

The easiest way that I have found to show hide elements based off of radio values is to serve up an onchange event based on the id of the element (which you already have). In your case, since you only have two radios based off the same name, the easiest way is a simple if/else statement. Something like:
<script type="text/javascript">
$(function(){
$('#checkbox-1a').change(function(){
if($(this).attr('checked')){
$('#hidden-text-<?php echo $q_id;?>').hide(500);
}else{
$('#hidden-text-<?php echo $q_id;?>').show(500);
}
});
});
</script>
Where we state when #checkbox-1a is changed: if the element is checked (selected), then do something (in your case hide something), otherwise do something else (in your case show something).

Answer 3

Try something like:
<div data-role="collapsible" data-theme="b" data-content-theme="c">
<h3>Vehicle Check Information</h3>
<?php
$query = mysql_query("SELECT id,title FROM vehicle_q");
while($row = mysql_fetch_array($query)) {
$q_title = $row['title'];
$q_id = $row['id'];
?>
<div data-role="fieldcontain" style="border:0;" class="groupings">
<fieldset data-role="controlgroup">
<legend><?=$q_title?>:</legend>
<input type="radio" name="help[]" id="checkbox-<?=$q_id?>-1a" value="Ok" />
<label for="checkbox-<?=$q_id?>-1a">Ok</label>
<input type="radio" name="help[]" id="checkbox-<?=$q_id?>-2a" value="Not Ok" />
<label for="checkbox-<?=$q_id?>-2a">Not Ok</label>
</fieldset>
<div id="hidden_text-<?=$q_id?>" class="hiddenText" style="display:none;">
<fieldset data-role="fieldcontain">
<label for="<?=$q_title?>_t">Explain the Deficiency(If any):</label>
<textarea name="text_<?=$q_id?>_a[]" id="<?=$q_title?>_t"></textarea>
</fieldset>
</div>
</div>
<input type="hidden" name="q_title1[]" value="<?php echo $q_title; ?>" />
<?php
}
?>
</div>
<script>
$(document).ready(function(){
$(".groupings input:radio").click(function(){
if (this.value == "Ok") {
$(this).parent().next('.hiddenText').show(500);
} else {
$(this).parent().next('.hiddenText').hide(500);
}
});
});
</script>
This is untested, but the script only needs to be declared once and it will apply to the rest relative to the radio button.