Question

我正在尝试根据单选按钮中选择的内容显示特定的html块，其中包含一些表单元素。

下面是我所拥有的框架，我没有包含任何我尝试的JQUERY，因为我无法得到任何工作。有人可以帮助我填补空白吗？

TIA！

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script src="/js/jquery.chainedSelects.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
    showValBox = function(data) {

    };  
});
</script>


<form action="" method="post" id="SomeForm" />
<table>
    <tr>
        <td class="td-ctr">Size</td>
        <td class="td-ct"><input type="radio" name="Radio" value="Value1" onChange="showValBox(this.value)" /> Value <input type="radio" name="Radio" value="Value2" onChange="showValBox(this.value)" /> Value</td>
    </tr>
    <div id="Value1" style="display:none">
    <tr>
        <td class="td-ctr">Only if Value 1</td>
        <td class="td-ct"><input type="text" name="SomeName" value="" /></td>
    </tr>
    </div>          
    <div id="Value2" style="display:none">
    <tr>
        <td colspan="2" class="td-ct">Online if Value 2</td>
    </tr>
    <tr>
        <td class="td-ctr">SomeName1</td>
        <td class="td-ct"><input type="text" name="SomeName1" value="" /></td>
    </tr>   
    <tr>
        <td class="td-ctr">SomeName2</td>
        <td class="td-ct"><input type="text" name="SomeName2" value="" /></td>
    </tr>
    <tr>
        <td class="td-ctr">SomeName3</td>
        <td class="td-ct"><input type="text" name="SomeName3" value="" /></td>
    </tr>
    <tr>
        <td class="td-ctr">SomeName4/td>
        <td class="td-ct"><input type="text" name="SomeName4" value="" /></td>
    </tr>
    <tr>
        <td class="td-ctr">SomeName5</td>
        <td class="td-ct"><input type="text" name="SomeName5" value="" /></td>
    </tr>
    <tr>
        <td class="td-ctr">SomeName6</td>
        <td class="td-ct"><input type="text" name="SomeName6" value="" /></td>
    </tr>
    <tr>
        <td class="td-ctr">SomeName7</td>
        <td class="td-ct"><input type="text" name="SomeName7" value="" /></td>
    </tr>                                                                               
    </div>
</table>
</form>

Answer 1

您的HTML无效，因为如果将DIV元素包含在表中，则DIV元素必须位于列中。你真正想要做的是根据它们属于哪个集合为你的行提供不同的类，然后根据类显示/隐藏。您可以考虑使用“隐藏”类来控制“display：none;”样式，然后只需添加/删除此类。

我可能会在点击时运行它并使用jQuery：

$('[name=Radio]').click( function() {
   var klass = '.' + $(this).val();
   $('.class1,.class2').addClass('hidden');
   $(klass).removeClass('hidden');
});

<form action="" method="post" id="SomeForm" />
<table>
    <tr>
        <td class="td-ctr">Size</td>
        <td class="td-ct">
            <input type="radio" name="Radio" value="class1" /> Value
            <input type="radio" name="Radio" value="class2"  /> Value
        </td>
    </tr>
    <tr class="class1 hidden">
        <td class="td-ctr">Only if Value 1</td>
        <td class="td-ct"><input type="text" name="SomeName" value="" /></td>
    </tr>
    <tr class="class2 hidden">
        <td colspan="2" class="td-ct">Online if Value 2</td>
    </tr
    ...

Answer 2

对你的问题不是一个真正的答案，但对已经出现的另外两个答案的评论注意到你不能把DIV放在你的行之间......

为此目的，即将相关行分组为单个元素，您可能对TBODY元素感兴趣，

<table>
    <tbody id="somegroup">
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
    </tbody>
    <tbody id="someOthergroup">
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
    </tbody>
</table>

Answer 3

您不应该在实际标记上使用更改事件，以便代码优雅地降级，从而允许两个选项都可见。此代码还将记住在刷新页面时选择了哪个无线电并显示正确的部分。

您不能将DIV标记放在TABLE的中间，因此我会为您重新考虑代码。

<html>
    <head>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("tbody[id^='Value']").hide();
                $("input[name='Radio']").click(function(){
                    change_selection();
                });
                change_selection();
            });

            function change_selection() {
                var selected_value = $("input[name='Radio']:checked").val();
                $("tbody[id^='Value']").hide();
                $("#" + selected_value).show();
            }
        </script>
    </head>
    <body>
        <form action="" method="post" id="SomeForm" />
            <table>
                <tbody>
                    <tr>
                        <td class="td-ctr">Size</td>
                        <td class="td-ct"><input type="radio" name="Radio" value="Value1" checked="checked"/> Value <input type="radio" name="Radio" value="Value2" /> Value</td>
                    </tr>
                </tbody>
                <tbody id="Value1">
                    <tr>
                        <td class="td-ctr">Only if Value 1</td>
                        <td class="td-ct"><input type="text" name="SomeName" value="" /></td>
                    </tr>
                </tbody>
                <tbody id="Value2">
                    <tr>
                        <td colspan="2" class="td-ct">Only if Value 2</td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName1</td>
                        <td class="td-ct"><input type="text" name="SomeName1" value="" /></td>
                    </tr>       
                    <tr>
                        <td class="td-ctr">SomeName2</td>
                        <td class="td-ct"><input type="text" name="SomeName2" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName3</td>
                        <td class="td-ct"><input type="text" name="SomeName3" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName4</td>
                        <td class="td-ct"><input type="text" name="SomeName4" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName5</td>
                        <td class="td-ct"><input type="text" name="SomeName5" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName6</td>
                        <td class="td-ct"><input type="text" name="SomeName6" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName7</td>
                        <td class="td-ct"><input type="text" name="SomeName7" value="" /></td>
                    </tr>                                                                                                                                                               
                </tbody>
            </table>
        </form>

    </body>
</html>

干杯，迪安

Answer 4

首先，您不能在表行之间在语义上使用DIV。它们必须包含在您的TD元素中。我建议您将您的ID标签应用于TR元素，这将隐藏整行。其次，我会建议你所有的TR分享一个类，以便在收音机改变时轻松隐藏元素。

隐藏行共享班级 hiddenContainers

<强> CODE

$(ready(function() {
    $("input[name='Radio']").click(function() {
        var val = $(this).val();
        $('.hiddenContainers').hide();
        $('#'+val).show();
    });
});

根据无线电选择显示其他表单元素

4 个答案: