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>

根据选中的单选按钮显示/隐藏div

2 个答案: