使用事件监听器。

Question

<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star" onclick="test(5);"/>
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star" onclick="test(4);"/>
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star" onclick="test(3);"/>
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star" onclick="test(2);"/>
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star" onclick="test(1);"/>
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

<script> 
      
    function test(value)
    {
          alert(value);
    }
        
</script>

以上是我现在所拥有的，它工作正常，但我不喜欢它如何在输入上使用 onclick 方法，是否有更简洁、更简单、更好的方法来做到这一点？

Answer 1

尝试类似 onclick="test(this.value);" 但无线电输入需要 value 属性

Answer 2

事件委托

将侦听器添加到父元素，检查单选按钮是否更改。

DOM 上的事件会向上冒泡到其父级（除非在自定义事件中另有指定或阻止了委托），直到它到达顶级元素。这意味着您可以监视单个元素上可能有多个元素的事件。委托的缺点是您必须检查您期望的元素类型。

这还允许您在任何动态添加的输入上捕获用例。

const form = document.querySelector('form');
form.addEventListener('change', ({target}) => {
    if (target.matches('input[type=radio]')) {
        console.log(target.value);
    }
});

<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star" value="5" />
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star" value="4" />
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star" value="3" />
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star" value="2" />
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star" value="1" />
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

Answer 3

使用事件监听器。

感谢 ths 的出色建议，我已将 test 函数修改为 log 而不是 alert。

在原版 JS 中：

var stars = document.querySelector('.stars form');
stars.addEventListener("click", function(event) {
  var clicked = event.target || event.srcElement;
  var num = clicked.getAttribute("id").substring(5);
  test(num);
});

function test(value) {
  console.log(value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star" />
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star" />
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star" />
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star" />
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star" />
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

在 jQuery 中：

$('.star').on("click", function() {
  test($(this).attr('id').substring(5));
});
function test(value) {
  console.log(value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star" />
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star" />
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star" />
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star" />
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star" />
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

Jon P 建议您使用 value 属性，这样当 id 属性的约定发生变化时，功能会保留。这可以像这样实现：

var stars = document.querySelector('.stars form');
stars.addEventListener("click", function(event) {
  var clicked = event.target || event.srcElement;
  var num = clicked.getAttribute("value");
  test(num);
});

function test(value) {
  console.log(value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star" value="5"/>
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star" value="4"/>
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star" value="3"/>
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star" value="2"/>
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star" value="1"/>
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

Answer 4

在我看来，Spectric's answer 是最好的，因为它可以保持代码的良好可读性。

但是为了表达另一种可能性，您可以向表单添加名称并动态创建内容。这样就不会有那么多的重复，如果以后需要增加radiobox的数量，你只需要修改for循环的条件即可。

var formSelector = document.getElementsByName('form_name')[0];
var radiobox, label;

for(var i = 1; i <= 5; i++) {
   radiobox = document.createElement("input");
   radiobox.setAttribute("class", "star star-" + i);
   radiobox.setAttribute("id", "star-" + i);
   radiobox.setAttribute("type", "radio");
   radiobox.setAttribute("name", "star");
   radiobox.setAttribute("onclick", "test(" + i + ")");

   label = document.createElement("label");
   label.setAttribute("class", "star star-" + i);
   label.setAttribute("for", "star-" + i);

   formSelector.appendChild(radiobox);
   formSelector.appendChild(label);
}

function test(value) {
   alert(value);
   // or console.log(value) if you don't want a popup everytime you click on a radiobox
 }

<div class="stars">
 <form action="" name="form_name"></form>
</div>

是否有一种更简洁、更简洁的方式来点击获取单选按钮的值？

4 个答案:

事件委托

使用事件监听器。

在原版 JS 中：

在 jQuery 中：