如何通过在 vanilla js 中再次单击来取消选中单选按钮

Question

我有一个单选按钮列表，最明显的操作是输入选中的值在单击时变为真。

我看过这个 link (Radio button uncheck on second click) 虽然 jquery 基本上是 javascript，但解决方案有点混乱，我希望有一个更现代的javascript解决方案。

我看到了有关使用复选框的建议，但我认为它在我的情况下不起作用，因为复选框将允许多个输入并且不适用于评级。

我想在再次单击单选按钮时取消选中它。最初的问题是第一个输入无法取消选中，我找到了这个解决方案（Issue with star rating css），但后来我意识到这不仅仅是第一个我需要这个选项..它适用于所有输入..和上面的 link，似乎（我不是 100% 确定）取消选中我可能单击的第一个输入按钮.. 这不是我要找的。如果用户单击文档上的任何位置，则应保持输入状态。但是如果用户觉得他需要取消选中他当前的操作，那么他会尝试再次单击选中的 star/input，我希望此时取消选中单选按钮。

我尝试在 Javascript 中创建函数，其逻辑是如果单击按钮的选中状态为 true，则将其更改为 false，但这不合逻辑，因为单击任何单选按钮（选中或未选择）会给出相同的结果。我想知道如何知道该特定标准的评级是否有已经检查过的输入，如果是，则取消选中它。在这一点上我完全迷路了。

我有下面提供的代码。

HTML

如果您在本地主机上测试 'star' 图标是否出现在代码中，请将此添加到头部部分

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

这是HTML

    <div class="rating">
      <input id="rating1" type="radio" name="rating" value="1" />
      <label for="rating1" class="material-icons">grade</label>
      <input id="rating2" type="radio" name="rating" value="2" />
      <label for="rating2" class="material-icons">grade</label>
      <input id="rating3" type="radio" name="rating" value="3" />
      <label for="rating3" class="material-icons">grade</label>
      <input id="rating4" type="radio" name="rating" value="4" />
      <label for="rating4" class="material-icons">grade</label>
      <input id="rating5" type="radio" name="rating" value="5" />
      <label for="rating5" class="material-icons">grade</label>
    </div>

这是CSS

input{
/*   display:none; */
}

label{
  color:orange;
  font-size:3rem;
}


.rating:not(:hover) input:indeterminate + label{
  color:grey
}

.rating:not(:hover) input:checked ~ input + label{
  color:grey;
}

.rating input:hover ~ input +label{
  color:grey;
}  



/* .rating:not(:hover) input:focus-visible + label{
  color:orange
} */

/* Reference : https://iamkate.com/code/star-rating-widget/ */

这是 JS

const rating = document.querySelector('.rating');

rating.addEventListener('change',function(){
  console.log('I have no idea what to do here!')
})

Answer 1

你应该使用事件点击 bcuz 当收音机检查为真时没有调用更改

     // Array inputs
    const ratings = document.querySelectorAll('input[name=rating]');

    // Array false & true.
    const array = [];

    for(let i = 0; i < ratings.length; i++)
    {
      array[i] = false;
      // create event handler onClick
      ratings[i].addEventListener('click',function()
      {
          //if item has checked before
          if(array[i] == true)
          {
            ratings[i].checked = false;
            array[i] = false;
            return; // return or will set to ture value
          }
          // set to true.
          array[i] = true;
      });
    }

更多信息：https://jsfiddle.net/t2u5dgeb/45/

如何通过在 vanilla js 中再次单击来取消选中单选按钮

How to uncheck a radio button by clicking it again in vanilla js

javascript

radio-button

onchange