html单选框+点击取消选中,【前端JS】radio 可单选可点击取消选中

一般情况下 radio 单选框只能实现多选一的效果，但是一旦选择其中一个后，这个单选框就不可点击取消其选中状态了，这种功能在某些业务环境下并不适用，有时我们既需要单选框的多选一效果，也需要复选框的可点击取消效果。为此本文提供一种 JQuery 写法。

/*

1. 取消与当前控件name 相同的所有控件的选中状态

2. 选中当前控件

3. 如果当前控件在点击前是选中状态，则点击后取消其选中状态

*/

$("input:radio").click(function(){

var domName = $(this).attr('name');//获取当前单选框控件name 属性值

var checkedState = $(this).attr('checked');//记录当前选中状态

$("input:radio[name='" + domName + "']").attr('checked',false);//1.

$(this).attr('checked',true);//2.

if(checkedState == 'checked'){

$(this).attr('checked',false); //3.

}

});这里把 radio 换成 checkbox 也能得到同样效果。

在前文所设的需求下，我们只需要取到 0 个或 1 个值，因此为取值方便考虑，本文推荐使用 radio 。

End .

版权声明：本文为博主原创文章，未经博主允许不得转载。

原文：http://blog.csdn.net/u011704894/article/details/46877869