jquery - 检查单选按钮时如何添加每个不同的类

Question

选中单选按钮时如何添加每个不同的类？

这是我的 html 代码？请帮帮我

<fieldset class="default (Want to add Class here)">
<input type="radio" id="a1" >
<label for="a1">style1</label>
<input type="radio" id="a2" >
<label for="a2">style2</label>
<input type="radio" id="a3" >
<label for="a3">style3</label>
</fieldset>

Answer 1

在jquery中使用change事件如下：

<fieldset class="default (Want to add Class here)">
    <input type="radio" name="a" id="red" class="a" />
    <label for="a1">style1</label>
    <input type="radio" name="a" id="black" class="a" />
    <label for="a2">style2</label>
    <input type="radio" name="a" id="gren" class="a" />
    <label for="a3">style3</label>
</fieldset>

$(document).ready(function () {
    $('.a').change(function () {
        // ...
        $(this).parent().addClass('class name');
    });
});

这是一个小提琴来说明这个想法

Answer 2

请参阅此处的演示jsfiddle
在单选按钮名称属性中使用组该按钮

 <fieldset class="default (Want to add Class here)">
    <input type="radio" id="a1" name="radio_btn">
    <label for="a1">style1</label>
    <input type="radio" id="a2"  name="radio_btn" >
    <label for="a2">style2</label>
    <input type="radio" id="a3"  name="radio_btn">
    <label for="a3">style3</label>
    </fieldset>

$('input').change(function(){
    var a=$(this).attr("id");
  $('fieldset').attr("class",a);
  alert($('fieldset').attr("class"));
});

Answer 3

好的，这不是 100% 清楚，但如果你看下面的小提琴：http: //jsfiddle.net/yawXd/

$("input[type='radio']").change(function () {
    alert($(this).attr("id"));
   $("fieldset").addClass("red");
});

每当单选按钮更改时，您都可以将类添加到fieldset.

现在，我添加了 的警报，id以防radio您希望有条件地更改fieldset.

此外，您可能应该使用 aclass作为radio按钮，并通过它进行选择 - 但更重要的是，您应该将 an 分配id给 yourfieldset并使用它来分配class：

<fieldset id="fldSet1" class="default (Want to add Class here)">

...

$("#fldSet1").addClass("red");

Answer 4

首先，如果您的单选按钮属于同一组，您应该将它们的名称属性设置为相同的值，这样当您选择一个时，其他的就不会被选中。此外，向字段集添加一个 id（但如果您愿意，也可以使用类选择器）。

<fieldset class="default" id="aFields">
<input type="radio" id="a1" name="myRadioField" >
<label for="a1">style1</label>
<input type="radio" id="a2" name="myRadioField">
<label for="a2">style2</label>
<input type="radio" id="a3" name="myRadioField">
<label for="a3">style3</label>
</fieldset>

然后试试这个：

$('input', '#aFields').change(function() { $(this).parent().addClass("myClass"); });