基于单选按钮更新元素的 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，但我似乎无法弄清楚如何在单击适当的单选元素时将非单选元素更新为它们的“已检查”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>

Answer 2

这就是它的方式。

• 如果用户点击按钮，我会得到输入的值
• 获取所有非按钮。
• 比较索引和值
• 相应地添加类

$(document).ready(function () {
    $('input').click(function () {
        $('input:not(:checked)').parent().removeClass("checked");
        $('input:checked').parent().addClass("checked");
                  let val = parseInt($('input[name=amount_offered]:checked').val());
        $('.point').each(function(index,element ){
        	if(index+1>val)
          	$( element ).addClass('checked');
          else
          	$( element ).removeClass('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 .checked{
      padding: 5px;
      border-radius: 50%;
      background:goldenrod;
      color: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" class="point"><label>3</label></span>
    <span id="point2keep" class="point"><label>2</label></span>
    <span id="point1keep" class="point"><label>1</label></span>
</div>