如何在jQuery中检查单选按钮时触发事件

Question

I tried doing .So, when I click on the radio button, the code works but the radio button doesn't get checked and it remains normal. How to solve this?

<p>
    <input id="play" class="rad" type='radio' name='a'/>
    <input id="pause" class="rad" type='radio' name='a'/>
</p>

var output = $('h1');
var isPaused = false;
var time = 30;
var t = window.setInterval(function () {
    if (!isPaused) {
        time--;
        output.text("0:" + time);
    }
}, 1000);

//with jquery
$('.pause').on('click', function (e) {
    e.preventDefault();
    isPaused = true;
});

$('.play').on('click', function (e) {
    e.preventDefault();
    isPaused = false;
});

Answer 1

A few things:

Your selectors are wrong: $('.pause') should either be $("#pause") or $(".rad")

Also, you are calling e.preventDefault() inside click . This is preventing the default behavior of a click on a radio button, which is to check it.

Updated jsFiddle for what I think you're trying to achieve, which is to let the radio buttons be a toggle for your timer:

var output = $('h1');
var isPaused = false;
var time = 30;
var t = window.setInterval(function() {

    if(!isPaused) {
        time--;
        output.text("0:" + time);
    }
}, 1000);

//with jquery
$('#pause').on('click', function(e) {
    isPaused = true;
});

$('#play').on('click', function(e) {
    isPaused = false;
});

Answer 2

$("input[type=radio]").change(function(){

   if(this.checked) 
   {
     alert("checked");
   }

});

And if your radio button has id say play then directly use #play as selector ie $("#play").change() .

Answer 3

<input id="play" class="rad" type='radio' name='a' value="1"/>
    <input id="pause" class="rad" type='radio' name='a' value="2"/>

var output = $('h1');
var isPaused = false;
var time = 30;
var t = window.setInterval(function() {
    if(!isPaused) {
        time--;
        output.text("0:" + time);
    }
}, 1000);

//with jquery
$('.rad').on('change', function(e) {
    e.preventDefault();
    if(this.value=='2')
    isPaused = true;
    else
        isPaused = false;
});

fiddle