封装单选和多选

一、HTML

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/CheckBox_Radio.css" />
	<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
	<script type="text/javascript" src="js/CheckBox_Radio.js"></script>
</head>

<body>
	<span class="radiobtn_item">
	    <input type="radio" value="1" />
	    <label class="radio_label on">
	        <i class="radiobtn_icon"></i>
	        <em class="radiobtn_text">单选一</em>
	    </label>
	</span>
	<span class="radiobtn_item">
	    <input type="radio" value="2" />
	    <label class="radio_label">
	        <i class="radiobtn_icon"></i>
	        <em class="radiobtn_text">单选二 </em>
	    </label>
	</span>
	<br/>
	<span class="checkbox_item">
	    <input type="checkbox" value="1" />
	    <label class="check_label">
	        <i class="checkbox_icon"></i>
	        <em class="checkbox_text"> 多选一</em>
	    </label>
	</span>
	<span class="checkbox_item">
	    <input type="checkbox" value="2" />
	    <label class="check_label">
	        <i class="checkbox_icon"></i>
	        <em class="checkbox_text">多选二</em>
	    </label>
	</span>
	<span class="checkbox_item">
	    <input type="checkbox" value="3" />
	    <label class="check_label">
	        <i class="checkbox_icon"></i>
	        <em class="checkbox_text">多选三</em>
	    </label>
	</span>
	<div style="border: 1px solid #66CCCC;background-color: #B0B0B0;color: #fff;padding: 5px;width: 50px;cursor: pointer;" onclick="submitVal()">看值</div>
	<script type="text/javascript">
		$(".check_label").checkbox(); //多选调用
		$(".radio_label").radio(); //单选调用
		
		function submitVal(){
			$('input[type="radio"]:checked').each(function() {
				radioVal = $(this).val();
			});
			console.log("单选值："+radioVal);
			var arr = new Array(); 
			$("input[type=checkbox]:checked").each(function(i){ 
				arr[i] = $(this).val(); 
			}); 
			var vals = arr.join(","); 
			console.log("多选值："+vals);
		}
	</script>
</body>

二、CheckBox_Radio.css

i,
em {
font-style: normal;
}
/多选样式/
.checkbox_item {
position: relative;
display: inline-block;
margin-right: 10px;
height: 16px;
}

.checkbox_item input {
position: absolute;
top: -9999px;
left: -9999px;
}

.checkbox_item .check_label {
display: inline-block;
cursor: pointer;
}

.checkbox_icon {
display: block;
float: left;
margin-right: 5px;
width: 16px;
height: 16px;
background: url(…/img/checkbox_icon.png) 0 0;
}

.check_label.on .checkbox_icon {
background-position: -16px 0;
}

.checkbox_text {
float: left;
height: 16px;
line-height: 16px;
}
/单选样式/
.radiobtn_item {
position: relative;
display: inline-block;
margin-right: 10px;
height: 16px;
}

.radiobtn_item input {
position: absolute;
top: -9999px;
left: -9999px;
}

.radiobtn_item .radio_label {
display: inline-block;
cursor: pointer;
}

.radiobtn_icon {
display: block;
float: left;
margin-right: 5px;
width: 16px;
height: 16px;
background: url(…/img/radiobtn_icon.png) 0 0;
}

.radio_label.on .radiobtn_icon {
background-position: -16px 0;
}

.radio_label1.on .radiobtn_icon {
background-position: -16px 0;
}

.radio_label2.on .radiobtn_icon {
background-position: -16px 0;
}

.radiobtn_text {
float: left;
height: 16px;
line-height: 16px;
}

三、CheckBox_Radio.js

//多选函数
; (function ($) {
$.fn.extend({
checkbox: function () {
return this.each(function () {
var $this = $(this); if ($ this.hasClass(“on”)) {
$this.siblings(“input”).prop(“checked”, “checked”);
} else {
$this.siblings(“input”).removeAttr(“checked”);
}
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots if ($ this.hasClass(“on”)) {
$this.siblings(“input”).removeAttr(“checked”);
$this.removeClass(“on”);
} else {
$this.siblings(“input”).prop(“checked”, “checked”);
$KaTeX parse error: Expected 'EOF', got '}' at position 42: \dots }̲ \dots$ ) {
var oiddiv = “”;
$.fn.extend({
radio: function () {
return this.each(function () {
var $this = $(this); if ($ this.hasClass(“on”)) {
$this.siblings(“input”).prop(“checked”, “checked”);
oiddiv = $this;
} else {
$this.siblings(“input”).removeAttr(“checked”);
}
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots if ($ this.hasClass(“on”)) {
// $this.siblings("input").removeAttr("checked"); //$ this.removeClass(“on”);
} else {
$this.siblings(“input”).prop(“checked”, “checked”);
$this.addClass(“on”);
oiddiv.siblings(“input”).removeAttr(“checked”);
oiddiv.removeClass(“on”);
oiddiv = $this;
}
});
});
}
});
})(jQuery);

四、效果图

猜你喜欢