Question

我有一组这样的单选按钮： <form> <input class="answer" name="answer" value="10" type="radio">ans0<br> <input class="answer" name="answer" value="11" type="radio">ans1<br> </form> 我在页面上写了多少次你点击任何单选按钮。

<p>Clicked:</p> <p id="clicked">0</p>

我需要jquery来计算所有这些点击次数。你能救我吗？

Answer 1

将单击事件侦听器附加到单选按钮。然后在回调中，您在单击了id的元素中读取当前数字，将其解析为数字，添加1，并将新值写入元素。

这样的事情：

// Attach a click-event listener to your radio-buttons
$("input[type='radio']").on("click", function () {
    // Cache the element
    var elm = $("#clicked");
    // Read the current value
    var count = parseInt(elm.text(), 10);
    // Update the element with the new value
    elm.text(count + 1);    
});

DEMO

Answer 2

您可以使用click功能捕获点击次数。

var counter = 0
$('input[name=answer]').click(function() {
  counter++
  $('#clicked').text(counter); // update text
});

Answer 3

尝试..

$(function(){
    var clicked = 0,
        radios = $('form input[type="radio"]'),
        clickBlock = $('#clicked');

    radios.click(function(){
        clicked++;
        clickBlock.html(clicked);
    });
});

Answer 4

这是一个working example on jsFiddle，我在收音机框html中添加了一个额外的属性来存储点击次数。如果这是一个选项，我认为它有效的清洁代码，那么只有一个代码块来处理点击事件并显示每个单选按钮的点击次数 - 无论你有多少

<input class="answer" name="answer" value="10" type="radio" data-clicked="0">ans0<br>
<input class="answer" name="answer" value="11" type="radio" data-clicked="0">ans1<br>

$(function(){
    $('.answer').click(function(){
       var numOfClicks = $(this).attr('data-clicked');
       numOfClicks = (numOfClicks * 1) + 1;
       $(this).attr('data-clicked', numOfClicks);
       alert(numOfClicks);
    });    
});

计算单选按钮的点击次数

4 个答案: