通常のボタンをラジオボタンとして使用して、いずれかを選択解除することができます（jQueryを切り替えます）

Question

私のフォームに2つのステップがあり、以下のコードのように記入してください。

ステップごとに1つのボタンだけが「ボタン選択」クラスを持つことができます。 "button-choose"クラスで別のボタンを押すと、以前に選択されたボタンは "button-choose"クラスに戻って、新たにクリックされたボタンは "button-selected"クラスに切り替える必要があります。

ボタンが既に選択されているボタンをクリックすると、「ボタン選択」に戻ります。これらはすべてjQueryを使用しています。

<div id="step-one"> 
    <div class="box"> 
     Information 
     <input type="button" class="button-choose" /> 
    </div> 
    <div class="box"> 
     Information 
     <input type="button" class="button-chosen" /> <!-- A button that the visitor has clicked --> 
    </div> 
    <div class="box"> 
     Information 
     <input type="button" class="button-choose" /> 
    </div> 
</div> 
<div id="step-two"> 
    <div class="box"> 
     Information 
     <input type="button" class="button-choose" /> 
    </div> 
    <div class="box"> 
     Information 
     <input type="button" class="button-chosen" /> <!-- A button that the visitor has clicked --> 
    </div> 
    <div class="box"> 
     Information 
     <input type="button" class="button-choose" /> 
    </div> 
</div> 

Answer 1

$("input[type='button']").click(function() { 
    var p = $(this).parent().parent(); 
    $("input[type='button']", p).not($(this)).removeClass("button-chosen").addClass("button-choose"); 
    $(this).toggleClass("button-chosen button-choose"); 
}); 

フィドル：http://jsfiddle.net/ajBtg/1/

Answer 2

これは、ジョブを実行する必要があります。

$("input[type='button']").click(
    function(){ 
     if($(this).hasClass("button-choose")) 
      $(this).removeClass("button-choose").addClass("button-chosen"); 
     else 
      $(this).removeClass("button-chosen").addClass("button-choose"); 
    } 
);