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

Question

第一：我不是很擅长JavaScript，我想使用jQuery函数。

这应该发生：

• input[type="radio"].select-editor - 如果被选中，应隐藏#alt-box只显示#editor-box。
• input[type="radio"].select-alt-ainput[type="radio"].select-alt-b和input[type="radio"].select-alt-c - 如果选中，应该隐藏#editor-box并显示#alt-box。
• input[type="radio"].select-alt-a - 如果被选中，应该表现出内#alt-box的#alt-a和隐藏#alt-box

内其他的div如果一个单选按钮被点击，就应该得到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 
});