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

Question

我试图做这个。当我点击单选框时，代码能运行但是单选框没有被选中，仍然保持原样。如何解决？

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

- Moltres

---

删除 e.preventDefault(); 并使用 $('#pause') 替代 $('.pause')，请查看 http://jsfiddle.net/zrNV5/61/。 - ketan

Answer 1

一些事情：

你的选择器是错误的： $('.pause') 应该是 $("#pause") 或者 $(".rad")

另外，你在 click 事件中调用了 e.preventDefault()。这会阻止单选按钮的默认行为，即选中它。 更新了 jsFiddle，我认为你想实现的是让单选按钮成为计时器的切换。

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

- CodingIntrigue

---

谢谢你的回答！ - Moltres

Answer 2

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

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

});

如果你的单选按钮有一个ID，比如说play，那么可以直接使用#play作为选择器，即$("#play").change()。

- void

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

小提琴

- Rasel