Question

首先：我不是很擅长javascript而且我想使用jQuery函数。

这应该发生：

input[type="radio"].select-editor - 如果选中，则应隐藏#alt-box仅显示#editor-box。
input[type="radio"].select-alt-a，input[type="radio"].select-alt-b和input[type="radio"].select-alt-c - 如果选中，则应隐藏#editor-box并显示#alt-box。
input[type="radio"].select-alt-a - 如果选中，则应在#alt-a内显示#alt-box并隐藏#alt-box

如果单击其中一个单选按钮，则应该checked="checked"，其他按钮应该松开该属性。

我不介意该函数是否使用hide()或将.hidden类添加到元素中。

<!-- here's where the action happens -->
<div id="select-container">
    <input type="radio" class="select-editor" checked="checked" />
    <input type="radio" class="select-alt-a" />
    <input type="radio" class="select-alt-b" />
    <input type="radio" class="select-alt-c" />
</div>

<div id="editor-box">
    <!-- my text editor -->
</div>

<div id="alt-box">
    <div id="alt-a">
        <!-- some content -->
    </div>
    <div id="alt-b">
        <!-- some content -->
    </div>
    <div id="alt-c">
        <!-- some content -->
    </div>
</div>

以下内容可能是无稽之谈。我希望有人能告诉我如何处理这个......

<script type="text/javascript">
    jQuery( document ).ready( function($)
        {
            $( "#select container input[type=\"radio\"]" ).click( function()
            {
                // something should happen here
            } );
        }
    );
</script>

这让我发疯，所以非常感谢你的帮助！

Answer 1

如果您只是给他们所有相同的name，则用户代理将自动允许在“组”中仅选择一个单选按钮;选择一个将取消选择可能已被选中的任何其他：

<div id="select-container">
    <input type="radio" name="selector" class="select-editor" checked="checked" />
    <input type="radio" name="selector" class="select-alt-a" />
    <input type="radio" name="selector" class="select-alt-b" />
    <input type="radio" name="selector" class="select-alt-c" />
</div>

要选择单选按钮，您可以挂钩change事件：

$('#select-container input[type="radio"]').change(function() {
     //check the id of this and trigger the appropriate action
 });

jQuery - 切换“已检查”和外部元素类

1 个答案: