// 单选框
$("body").on("click", ".checkbox-only", function() {
if ($(this).is(".onlychange")) {
$(this).removeClass("onlychange");
} else {
$(this).addClass("onlychange");
}
$(this).parents("td").parents("tr").siblings().find("input").removeClass("onlychange");
});
//单选框点击向上移
$("body").on("click", ".btn-up", function() {
var upHTML = $(".onlychange").parent().parent();
if($(".checkbox-only").index($(".onlychange")) > 0){
var obj = upHTML.clone(true);
var preHTML = upHTML.prev();
preHTML.before(obj);
upHTML.remove();
}
});
//单选框点击向下移
$("body").on("click", ".btn-down", function() {
var downHTML = $(".onlychange").parent().parent();
var aTr = $(".checkbox-only").parents("td").parents("tr").parents("tbody").children().length-1;
if($(".checkbox-only").index($(".onlychange")) < aTr){
var obj = downHTML.clone(true);
var nextHTML = downHTML.next();
nextHTML.after(obj);
downHTML.remove();
}
});
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checkbox-only"></td>
</tr>
</tbody>
</table>
/*单选框*/
.checkbox-only {
width: 17px;
height: 17px;
float: left;
padding-left: 5px;
font-size: 14px;
font-weight: inherit;
margin-bottom: 0;
margin-top: 4px;
cursor: pointer;
}
.checkbox-only i {
vertical-align: middle;
color: #2391DF;
font-size: 20px;
}
.checkbox-only:before {
content: "\e8ef";
font-family: "iconfont" !important;
margin-right: 5px;
font-size: 16px;
vertical-align: middle;
color: #b9b9b9;
background: #fff;
float: left;
}
.onlychange:before {
content: "\e8f1";
font-family: "iconfont" !important;
color: #2391DF;
}
