Q:

javascript: I want radio button action change according to the loop that fetch from database

My code is fetch data from database (suppose there are 4 records). Only first loop that effected when i changed radio button. Below is my code:
PHP CODE
while($row = mysql_fetch_array($sql)){
echo "<div class='loop'>";

    echo "<p><input type='checkbox' name='content_type' value='1' /></p>";
    echo "<p><input type='checkbox' name='content_type' value='2' /></p>";
    echo "<p><input type='checkbox' name='content_type' value='3' /></p>";

    //content_a
    echo "<div id='content_a' style='display:none;'>";
        echo "<textarea name='text' id='textarea0'><textarea>";
    echo "</div>";

    //content_b
    echo "<div id='content_b' style='display:none;'>";
        echo "<textarea name='text' id='textarea1'><textarea>";
    echo "</div>";

    //content_c
    echo "<div id='content_c' style='display:none;'>";
       echo "<textarea name='text' id='textarea2'><textarea>";
    echo "</div>";

    //button
    echo "<div class='button'>";
        echo "<a class="tweet1" href="#" onclick="return false;">Alert</a>";
    echo "</div>";

echo "</div>";
}

Javascript
$('input[name=content_type]').bind('change', function(){
   var n = $(this).val();
   switch(n)
   {
    case '1':
            $(this).parents('.loop').find('#content_a').show(1000);
            $(this).parents('.loop').find('#content_b').hide(1000);
            $(this).parents('.loop').find('#content_c').hide(1000);
            break;
    case '2':
            $(this).parents('.loop').find('#content_b').show(1000);
            $(this).parents('.loop').find('#content_a').hide(1000);
            $(this).parents('.loop').find('#content_c').hide(1000);
            break;
    case '3':
            $(this).parents('.loop').find('#content_c').show(1000);
            $(this).parents('.loop').find('#content_a').hide(1000);
            $(this).parents('.loop').find('#content_b').hide(1000);
            break;
   }
});

I want radio button action change according to the loop that fetch from database. My code above, only first loop that effected. How to solve this problem?

A:

that is beacuse id should always be unique...here (in your code ) you have multiple elements with same id id='content_a' (since it is inside a loop) . change this to class and use class selector
try this
html
  echo "<div class='content_a' style='display:none;'>";
        //---^^^^^ here

jquery
  $(this).parents('.loop').find('.content_a').show(1000);\
                        //-------^-----here

change likewise to all other id selector
and while parents('.loop') works.. i recommend to use closest() for better performance
  $(this).closest('.loop').find('.content_a').show(1000);

and yes.. you can reduce your code to two lines if you chnage your html properly..
first change you content to match with the checkbox value..
echo "<div class='content_1' style='display:none;'>";  //here class='content_' + value of checkbox
 .....
echo "<div class='content_2' style='display:none;'>";
... //so on

try this
$('input[name=content_type]').bind('change', function(){
   var n = $(this).val();
   $('div[class^="content_"]').hide(); //hide all div
   $(this).closest('.loop').find('.content_' + n).show(1000); //so particular div
});

