您的位置：首页 > Web前端 > JQuery

jquery实现radio按钮在分组状态下点击选中，再次点击取消选中

2015-11-13 00:00 846 查看

摘要: 利用data参数对radio的状态做控制，从而实现效果

效果实现共需三个文件：

1、test.html 内容：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery1.8.2.js"></script>
<script type="text/javascript" src="./radioChecked.js"></script>
</head>
<body>
<!-- <input type="radio" name="test" value="a" data-check="1">
<input type="radio" name="test" value="b" data-check="1">

<HR>
<input type="radio" name="test1" value="c" data-check="1">
<input type="radio" name="test1" value="d" data-check="1">
<input type="radio" name="test1" value="e" data-check="1"> -->
<input type="radio" name="test" value="a">
<input type="radio" name="test" value="b">

<HR>
<input type="radio" name="test1" value="c">
<input type="radio" name="test1" value="d">
<input type="radio" name="test1" value="e">
</body>
<script>

$(function(){

$('.testch').click(function(){
$(this).radioChecked().init();
});
$('.testch').radioChecked().setDataAttr()
});
</script>
</html>

2、radioChecked.js 内容

;(function($, window, document, undefined){
var MyPlugin = function(obj){
this.$object = obj,
this.className = this.getClass(),
this.elementName = this.getElementName()
//this.options = $.extend({}, this.defaults, opt)
}

MyPlugin.prototype = {
init: function() {
if(this.$object.data('check') == '1'){
$(':radio[name="'+ this.elementName +'"]').each(function(){
$(this).data('check','1');
});
this.$object.data('check','2');
alert('选中');
}
else if(this.$object.data('check') == '2'){
this.$object.data('check','1');
this.$object.removeAttr('checked');
alert('取消选中');
}
},
getClass: function(){
return this.$object.attr('class');
},
getElementName: function(){
return this.$object.attr('name');
},
setDataAttr: function(){
$('.'+this.className).data('check','1');
}
}

$.fn.radioChecked = function(){
return new MyPlugin(this);
}
})(jQuery, window, document);

3、jquery1.8.2.js

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航