jquery - ラジオボタンのクリック数をカウントする

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);    
});​​​​​​​​

デモ

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

これはjsFiddleの実際の例です。ラジオボックスのhtmlに追加の属性を入れて、クリック数を保存します。これが効率的なクリーンコードに役立つと思うオプションである場合、クリックイベントを処理し、すべてのラジオボタンのクリックを表示するために記述されたコードのブロックは1つだけです-いくつ持っていても

<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);
    });    
});​