Блог

Во-первых: я не очень хорош в 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>
  

Это сводит меня с ума, так что большое спасибо за любую помощь!

Если вы просто присвоите им всем одинаковое значение 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
 });