封裝單選和多選
一、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.hasClass(“on”)) {
$this.siblings(“input”).prop(“checked”, “checked”);
} else {
$this.siblings(“input”).removeAttr(“checked”);
}
KaTeX parse error: Expected '}', got 'EOF' at end of input: … 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: … }̲ …) {
var oiddiv = “”;
$.fn.extend({
radio: function () {
return this.each(function () {
var $this = 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: … if (this.hasClass(“on”)) {
// this.removeClass(“on”);
} else {
$this.siblings(“input”).prop(“checked”, “checked”);
$this.addClass(“on”);
oiddiv.siblings(“input”).removeAttr(“checked”);
oiddiv.removeClass(“on”);
oiddiv = $this;
}
});
});
}
});
})(jQuery);
四、效果圖