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

改变radio的样式以及radio组相关操作的jquery插件

2017-12-11 16:16 791 查看

思路:1.将原先的radio给隐藏掉,用图片来替代

2.这里替代的图片有两种形式.第一种是一张图片有两个小图,这时候需要改变图片的位置即可第二种,会比第一种简单一些它只是需要用两种类来渲染不同的图片即可 . 这里的例子用的是第二种

效果图:

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="lib/jquery-3.1.1.js"></script>
<title>Document</title>
<style>
input[type="radio"]{
display: none;
}
.radio{
background-image: url(single_nor.png);
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
}
.radioOn{
background-image: url(single_sel.png);
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
}
</style>
</head>

<body>
<form action="" method="get">
您最喜欢水果？<br /><br />
<label ><input name="Fruit" type="radio" class="store-radio" value="" /></label>苹果
<label><input name="Fruit" type="radio" class="store-radio"  value="" /></label>桃子
<label><input name="Fruit" type="radio" class="store-radio"  value="" /></label>香蕉
<label><input name="Fruit" type="radio" class="store-radio" value="" /></label>梨
<label><input name="Fruit" type="radio" class="store-radio"  value="" /></label>其它
<label></label>
</form>
<script>
$(function(){
//初始化
$('input[name="Fruit"]').each(function(index,element){
$(element).parent().addClass("radio");
});
//为label注册单击事件
$('input[name="Fruit"]').each(function(index,element){
$(element).parent().click(function(){
if($(this).hasClass("radio")){
//清除兄弟节点中选中节点的选中
$(this).siblings(".radioOn").each(function(index,element){
$(element).removeClass("radioOn").addClass("radio");
});
//为当前节点选中
$(this).removeClass("radio").addClass("radioOn");
return false;
}
//为当前节点取消选中
else if($(this).hasClass("radioOn")){
$(this).removeClass("radioOn").addClass("radio");
return false;
}
});
});
});
</script>

</body>

</html>

//radio插件 对象为一整个按钮组
; (function () {
$.fn.extend({
"storeRadioInit": function () {
if ($(this).length > 0) {
$(this).each(function (index, element) {
$(element).parent().addClass("radio").click(function () {
if ($(this).hasClass("radio")) {
$(this).siblings(".radioOn").each(function (index, element) {
$(this).children()[0].checked = false;
$(element).removeClass("radioOn").addClass("radio");
});
$(this).removeClass("radio").addClass("radioOn");
$(this).children()[0].checked = true;
return false;
}
else if ($(this).hasClass("radioOn")) {
$(this).children()[0].checked = false;
$(this).removeClass("radioOn").addClass("radio");
return false;
}
});
});

}
},
"getSelectedValue": function () {
var value = "";
if ($(this).length > 0) {
$(this).each(function (index, element) {
if ($(element).parent().hasClass("radioOn")) {
value = $(element).val();
//终止循环   终止本次循环为:return true
return false;
}
});
//该方法的返回
return value;
}
},
"setValue": function (value) {
if ($(this).length > 0) {
$(this).each(function (index, element) {
if ($(element).val() == value) {
$(element).parent().siblings('.radioOn').each(function (index, element) {
element.checked = false;
$(element).removeClass('radioOn').addClass('radio');
});
$(element).parent().addClass('radioOn');
element.checked = true;
return false;
}
});
}
}
});
})(jQuery);

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

标签：

相关文章推荐

新的分享

章节导航

改变radio的样式 以及radio组相关操作的jquery插件

改变radio的样式以及radio组相关操作的jquery插件