<!DOCTYPE html>
<html>
<head>
<title>jquery+DOM实现表格拖选，使checkbox选中</title>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<table>
<tr rel="1"><td><input name="x1" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
<tr rel="2"><td><input name="x2" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
<tr rel="3"><td><input name="x3" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
<tr rel="4"><td><input name="x4" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
<tr rel="5"><td><input name="x5" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
<tr rel="6"><td><input name="x6" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
<table>
<script type="text/javascript">
$(function(){
var selected = [];
$('table tr').mousedown(function(){
selected = [];
selected.push($(this).attr('rel'));
})
$('table tr').mouseover(function(){
if( selected ){
selected.push($(this).attr('rel'));
}
})
$('table tr').mouseup(function(){
for(var i in selected){
console.log(selected[i]+"::"+$("tr[rel="+selected[i]+"] input").get(0).checked);
//console.log(selected[i]+"::"+$("tr[rel="+selected[i]+"] input").attr('checked'));
if( $("tr[rel="+selected[i]+"] input").get(0).checked ){
$("tr[rel="+selected[i]+"] input").get(0).checked=false;
//$("tr[rel="+selected[i]+"] input").removeAttr('checked');
}else{
$("tr[rel="+selected[i]+"] input").get(0).checked=true;
//$("tr[rel="+selected[i]+"] input").attr('checked', 'checked');
}
}
})
});
</script>
</body>
</html>
<html>
<head>
<title>jquery+DOM实现表格拖选，使checkbox选中</title>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<table>
<tr rel="1"><td><input name="x1" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
<tr rel="2"><td><input name="x2" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
<tr rel="3"><td><input name="x3" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
<tr rel="4"><td><input name="x4" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
<tr rel="5"><td><input name="x5" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
<tr rel="6"><td><input name="x6" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
<table>
<script type="text/javascript">
$(function(){
var selected = [];
$('table tr').mousedown(function(){
selected = [];
selected.push($(this).attr('rel'));
})
$('table tr').mouseover(function(){
if( selected ){
selected.push($(this).attr('rel'));
}
})
$('table tr').mouseup(function(){
for(var i in selected){
console.log(selected[i]+"::"+$("tr[rel="+selected[i]+"] input").get(0).checked);
//console.log(selected[i]+"::"+$("tr[rel="+selected[i]+"] input").attr('checked'));
if( $("tr[rel="+selected[i]+"] input").get(0).checked ){
$("tr[rel="+selected[i]+"] input").get(0).checked=false;
//$("tr[rel="+selected[i]+"] input").removeAttr('checked');
}else{
$("tr[rel="+selected[i]+"] input").get(0).checked=true;
//$("tr[rel="+selected[i]+"] input").attr('checked', 'checked');
}
}
})
});
</script>
</body>
</html>
注释为无效实现方式，多次操作属性改变，但多选框未选中
该效果待完善。。。
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
