使用jQuery破解单选按钮行为(取消选中组)

时间:2015-08-18 13:52:25

标签: javascript jquery html radio-button

对于一个项目,我需要在一个组中使用两个单选按钮,并且需要在单击时取消选中已选中的单选按钮。

我尝试过类似的东西,但这不起作用:

$(document).ready(function() {
    $("input[type='radio']:checked").click(function(e) {
        e.preventDefault();
        $(this).prop("checked", false);
        alert('Hello World!');
    });
});

单击选中的单选按钮时,它甚至不会发出警报。

每当我在我的控制台中调用它时:

$("input[type='radio']:checked").prop('checked', false);

取消选中已选中的单选按钮,以便该部分可以正常工作。

2 个答案:

答案 0 :(得分:5)

实际上,当您使用click时,不能使用mousedown代替

附加工作代码段

$(function(){
  $('#wrapper').on('mousedown', 'input[type=radio]',function(e){
	if(!$(e.target).is(':checked')){
		return true;
	}
	e.preventDefault();
    $(this).prop("checked", false);
    alert('Hello World!');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
	<input type=radio name=hello />
	<input type=radio name=hello />
	<input type=radio name=hello checked/>
</div>

答案 1 :(得分:0)

你的选择器错了。页面加载时,您只将.click函数绑定到SELECTED复选框。将$("input[type='radio']:checked")更改为$("input[type='radio']")