javascript - 基于单选按钮更新元素的CSS样式

Question

我编写了 10 个单选按钮，它们的工作原理基本上类似于星级评分。我想要做的是有另外 10 个类似按钮的圆形元素，它们根据按下的单选按钮进行更新。例如，如果按下第 9 个单选按钮，我只想突出显示第一个类似按钮的圆形元素(更改它的 css 类)。或者，如果按下第 5 个按钮，那么我希望更新第 5 个圆形元素。

我到处寻找类似的东西，比如可能使用一个值来显示星星，但我似乎找不到任何我特别想做的事情。我将不胜感激。

基本上我的单选按钮看起来像这样(实际代码中有十个按钮，但在这里浓缩为三个按钮):

  <div class="points">
      <span><input type="radio" name="amount_offered" id="point3" value="3"> 
          <label for="point3">3</label></span>
      <span><input type="radio" name="amount_offered" id="point2" value="2"> 
          <label for="point2">2</label></span>
      <span><input type="radio" name="amount_offered" id="point1" value="1"> 
          <label for="point1">1</label></span>
  </div>

其他的圆形按钮是这样的:

<div class="pointskeep"> 
    <span><id="point3keep"><label>3</label></span>
    <span><id="point2keep"><label>2</label></span>
    <span><id="point1keep"><label>1</label></span>
</div>

我的 CSS 代码如下:

    .points span label {
        border-radius:50%;
        color:black;
        background:white;
    }
    .points span:hover ~ span label,
    .points span:hover label,
    .points span.checked label,
    .points span.checked ~ span label {
        background:goldenrod;
        color:white;
    }

    .pointskeep span label {
        border-radius:50%;
        background:goldenrod;
        color:white;
        }
    .pointskeep span.checked label,
    .pointskeep span.checked ~ span label {
        color:black;
        background:white;
    }

我的 js 看起来像这样:

 $(document).ready(function(){

        // Check Radio-box
        $(".points input:radio").attr("checked", false);

        $('.points input').click(function () {
            $(".points span").removeClass('checked');
            $(".nopoints span").removeClass('checked');
            $(this).parent().addClass('checked');

        });

我一直在摆弄 javascript，但我似乎无法弄清楚如何在单击适当的 radio 元素时将非 radio 元素更新为它们的“选中”css 样式。有更好的方法吗？

Answer 1

试试这个:-

$(document).ready(function () {
    $('input').click(function () {
        $('input:not(:checked)').parent().removeClass("checked");
        $('input:checked').parent().addClass("checked");
    });    
});

.points span label {
        border-radius:50%;
        color:black;
        background:white;
    }
    .points span:hover ~ span label,
    .points span:hover label,
    .points span.checked label,
    .points span.checked ~ span label {
        background:goldenrod;
        color:white;
    }

    .pointskeep span label {
        border-radius:50%;
        background:goldenrod;
        color:white;
        }
    .pointskeep span.checked label,
    .pointskeep span.checked ~ span label {
        color:black;
        background:white;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="points">
      <span><input type="radio" name="amount_offered" id="point3" value="3"/> 
          <label for="point3">3</label></span>
      <span><input type="radio" name="amount_offered" id="point2" value="2"/> 
          <label for="point2">2</label></span>
      <span><input type="radio" name="amount_offered" id="point1" value="1"/> 
          <label for="point1">1</label></span>
  </div>

<div class="pointskeep"> 
    <span><id="point3keep"><label>3</label></span>
    <span><id="point2keep"><label>2</label></span>
    <span><id="point1keep"><label>1</label></span>
</div>