показать/скрыть div на основе переключателя отмечен

Question

Я пытаюсь показать/скрыть текстовые поля на основе проверенных переключателей. Вот мой код; она отлично работает, если я не использую таблицы тегов, при использовании таблицы тегов, Javascript не работает

<script type="text/javascript"> 
function onchange_handler(obj, id) { 
    var other_id = (id == 'personal')? 'corporate' : 'personal'; 
    if(obj.checked) { 
     document.getElementById(id + '_form_fields').style.display = 'block'; 
     document.getElementById(other_id + '_form_fields').style.display = 'none'; 
    } else { 
     document.getElementById(id + '_form_fields').style.display = 'none'; 
     document.getElementById(other_id + '_form_fields').style.display = 'block'; 
    } 
} 
</script> 
<table> 
    <tr> 
    <td colspan="2"> 
    <input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important" onchange="onchange_handler(this, 'personal');" onmouseup="onchange_handler(this, 'personal');"> 
    <strong>Individual Form</strong> 

    <input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important" onchange="onchange_handler(this, 'corporate');" onmouseup="onchange_handler(this, 'corporate');"> 
    <strong>Corporation Form</strong> 
    </td><tr> 

    <!-- If Individual Form is checked --> 
    <div id="personal_form_fields"> 
      <tr><td>First Name</td> 
       <td><input type="text" name="First_Name" value=""></td> 
      </tr> 
      <tr><td>Last Name</td> 
       <td><input type="text" name="Last_Name" value=""></td> 
      </tr> 
    </div> 

    <!-- If Corporation Form is checked --> 
    <div id="corporate_form_fields" style="display: none;"> 
     <tr><td>Company</td> 
     <td><input type="text" name="company_name" value=""></td> 
     </tr> 
    </div> 
</table> 

Answer 1

Что putvande может означать, по «странному разметки» является то, что ваш <div id="personal_form_fields"> находится в таблице, с его родителем являющийся тегом table. Это не правильно. tr должен содержать td, который содержит div, а не наоборот.

Если вы пытаетесь изменить видимость, эта синтаксическая ошибка может быть проблемой.

Answer 2

Просто добавьте класс к TR каждой группы и показать/скрыть класс ...

<script type="text/javascript"> 

function onchange_handler(obj, id) { 
    var other_id = (id == 'personal')? 'corporate' : 'personal'; 
    if(obj.checked) 
    { 
     class_display(id + '_form_fields','block'); 
     class_display(other_id + '_form_fields','none'); 
    } else { 
     class_display(id + '_form_fields','none'); 
     class_display(other_id + '_form_fields','block'); 
    } 
} 

function class_display(tr_class,display) 
{ 
    var tr_ele = document.getElementsByClassName(tr_class); 
    for (var i = 0; i < tr_ele.length; ++i) { 
     var item = tr_ele[i]; 
     item.style.display = display; 
    } 
} 
</script> 
<table> 
    <tr> 
     <td colspan="2"> 
      <input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important" onChange="onchange_handler(this, 'personal');" onmouseup="onchange_handler(this, 'personal');" checked> 
      <strong>Individual Form</strong> 

      <input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important" onchange="onchange_handler(this, 'corporate');" onmouseup="onchange_handler(this, 'corporate');"> 
      <strong>Corporation Form</strong> 
     </td> 
    <tr> 

    <!-- If Individual Form is checked --> 
    <tr class="personal_form_fields"> 
     <td>First Name</td> 
     <td><input type="text" name="First_Name" value=""></td> 
    </tr> 
    <tr class="personal_form_fields"> 
     <td>Last Name</td> 
     <td><input type="text" name="Last_Name" value=""></td> 
    </tr> 

    <!-- If Corporation Form is checked --> 
    <tr class="corporate_form_fields" style="display: none;"> 
     <td>Company</td> 
     <td><input type="text" name="company_name" value=""></td> 
    </tr> 

</table>