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中的更改事件，如下所示：

<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');
    });
});

Here's a fiddle to illustrate the idea

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上的课程。

此外，您应该使用class radio按钮，然后选择 - 但更重要的是，您应该为id分配fieldset和用它来分配class：

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

...

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

Answer 4

首先，如果它们属于同一组，则应将单选按钮的name属性设置为相同的值，这样当您选择一个时，其他按钮将被取消选中。另外，在字段集中添加一个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"); });

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

4 个答案: