当CSS标签输入无线电时混淆

发布于 2025-02-10 00:30:52 字数 1304 浏览 1 评论 0 原文

我正在编写代码以更改标签样式时，当它检查其收音机时。这是我的代码：

<body>
<div class="input-area input-area-sp">
    <label id="daily" class="container-radio checked">
      <input type="radio" checked="checked" name="radio" class="radio">
      <span class="checkmark"></span>
      <em>Daily</em>
    </label><br/>
    
    <label id="weekly" class="container-radio">
      <input type="radio" name="radio"  class="radio">
      <span class="checkmark"></span>
      <em>Weekly</em>
    </label>
</div>

<script>
    $(document).on("click", 'input.radio', function () {
    if ($(this).is(":checked")) {
        $('label.checked').removeClass('checked');
        $(this).parent().addClass("checked");
    }
});
</script>
</body>

上课。

<style>
    .checked {
    color:green;
}
</style>

在这里检查是jsfiddle：

在这里一切正常。

但是，当我将类名称从“检查”更改为诸如“ Active”（在CSS和jQuery中）之类的其他内容时，在未选择的情况下，标签无法删除类（所有标签仍然是绿色的）。

任何人都可以为我解释一下。非常感谢。

原文

I am writing code to change label style when its radio is checked. Here is my code:

<body>
<div class="input-area input-area-sp">
    <label id="daily" class="container-radio checked">
      <input type="radio" checked="checked" name="radio" class="radio">
      <span class="checkmark"></span>
      <em>Daily</em>
    </label><br/>
    
    <label id="weekly" class="container-radio">
      <input type="radio" name="radio"  class="radio">
      <span class="checkmark"></span>
      <em>Weekly</em>
    </label>
</div>

<script>
    $(document).on("click", 'input.radio', function () {
    if ($(this).is(":checked")) {
        $('label.checked').removeClass('checked');
        $(this).parent().addClass("checked");
    }
});
</script>
</body>

and class .checked

<style>
    .checked {
    color:green;
}
</style>

Here is the jsfiddle: https://jsfiddle.net/stern/p67qf1km/3/

Everything works fine here.

But when I change the class name from 'checked' to something else like 'active' (in CSS and jQuery), the label can not remove class when not selected (all labels are still green).

Can anyone explains that for me.
Thank you very much.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

-黛色若梦 2025-02-17 00:30:52

我可以更改班级名称，您可能需要参考我的代码

<div class="input-area input-area-sp">
    <label id="daily" class="container-radio active ">
      <input type="radio" checked="checked" name="radio" class="radio">
      <span class="checkmark"></span>
      <em>Daily</em>
    </label><br/>
    
    <label id="weekly" class="container-radio">
      <input type="radio" name="radio"  class="radio">
      <span class="checkmark"></span>
      <em>Weekly</em>
    </label>
</div>

.active  {
    color: green;
}

$(document).on("click", 'input.radio', function () {
    if ($(this).is(":checked")) {
        $('label.active').removeClass('active');
        $(this).parent().addClass("active");
    }
});

I can change the class name, you might want to refer to my code
https://jsfiddle.net/15frkLpe/

<div class="input-area input-area-sp">
    <label id="daily" class="container-radio active ">
      <input type="radio" checked="checked" name="radio" class="radio">
      <span class="checkmark"></span>
      <em>Daily</em>
    </label><br/>
    
    <label id="weekly" class="container-radio">
      <input type="radio" name="radio"  class="radio">
      <span class="checkmark"></span>
      <em>Weekly</em>
    </label>
</div>

.active  {
    color: green;
}

$(document).on("click", 'input.radio', function () {
    if ($(this).is(":checked")) {
        $('label.active').removeClass('active');
        $(this).parent().addClass("active");
    }
});

回复收藏 0 原文

泛泛之交 2025-02-17 00:30:52

你可以尝试这样的东西，

$(document).on("click", 'input.radio', function () {
    if ($(this).is(":checked")) {
        $('.input-area .active').removeClass('active');
        $(this).parent().addClass("active");
    }
});

$（'。输入-area .Active'）。removeclass（'active'）;

上面的代码将从“ .input-raea”中的所有元素中删除并删除“ Active”类，并在父元素中添加“ Active”类。

You could try something like this,

$(document).on("click", 'input.radio', function () {
    if ($(this).is(":checked")) {
        $('.input-area .active').removeClass('active');
        $(this).parent().addClass("active");
    }
});