Question

假设我希望我的访问者填写表单的两个步骤，如下面的代码。

每个步骤只允许一个按钮使“按钮选择”类。如果我按下“按钮选择”类的另一个按钮，之前选择的按钮应切换回“按钮选择”类，新点击的按钮应切换到“按钮选择”类。

如果我点击已经有“按钮选择”类的按钮，它应该切换回“按钮选择”。所有这些都使用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");
     }
);

使用常规按钮作为单选按钮，可以取消选择其中任何一个（切换jQuery）

2 个答案: