답변 3개
출처에서 약간 응용했어요~
전 잘 되던데
어떻게 될지 모르겠네여~
*css
</p>
<p>.focus {position:fixed; border:1px solid red; background-color:rgb(128, 0, 0, 0.3);}</p>
<p>
*html
</p>
<p><div class="col-xs-12">
<input type="checkbox" name="a1" value="">
<input type="checkbox" name="a2" value="">
<input type="checkbox" name="a3" value="">
<input type="checkbox" name="a4" value="">
<input type="checkbox" name="a5" value="">
<input type="checkbox" name="a6" value="">
</div></p>
<p><div class="focus"></div></p>
<p>
*script
</p>
<p>$(function(){
var target = 'input[type=checkbox]'; //셀렉트로 묶을 객체
var mode = false;
var startX = 0;
var startY = 0;
var left, top, width, height;
var $focus = $(".focus");
$(document).on("mousedown", function(e) {
mode = true;
startX = e.clientX;
startY = e.clientY;
width = height = 0;
$focus.show();
rangeSelect(target, 0, 0, 0, 0, function() { //기존에 선택된 객체를 선택취소한다.
$(this).removeAttr("checked","");
});
}).on('mouseup', function(e) {
mode = false;
$focus.hide();
$focus.css("width", 0);
$focus.css('height', 0);
//범위 내 객체를 선택한다.
rangeSelect(target, left, top, left + width, top + height, function(include) {
if(include){
console.log($(this));
$(this).attr("checked","checked");
}else{
$(this).removeAttr("checked","");
}
});
}).on('mousemove', function(e) {
if(!mode) {
return;
}
var x = e.clientX;
var y = e.clientY;
//마우스 이동에 따라 선택 영역을 리사이징 한다
width = Math.max(x - startX, startX - x);
left = Math.min(startX, x);
$focus.css('left', left);
$focus.css("width", width);
height = Math.max(y - startY, startY - y);
top = Math.min(startY, y);
$focus.css('top', top);
$focus.css('height', height);
});
function rangeSelect(selector, x1, y1, x2, y2, cb) {
$(selector).each(function() {
var $this = $(this);
var offset = $this.offset();
var x = offset.left;
var y = offset.top;
var w = $this.width();
var h = $this.height();
//범위 안인지 체크
cb.call(this, x >= x1 && y >= y1 && x + w <= x2 && y + h <= y2);
});
}
});</p>
<p>
출처 : https://sub0709.tistory.com/64">https://sub0709.tistory.com/64
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
아 상관없어요 체크박스는 스크립트가 적용되는 모든 페이지의 체크박스를 전부 적용하게 해놓아서 체크박스는 솔직히 따로 만들지 않으셔도 됩니다.
다만
html 부분 중 가장 하단에 있던
와
css .focus {position:fixed; border:1px solid red; background-color:rgb(128, 0, 0, 0.3);}
이 두 부분은 반드시 필요하니
체크 박스가 있는 페이지 하단에 넣어주시고
스크립트만 적용해주시면 됩니다.
댓글을 작성하려면 로그인이 필요합니다.
질문이 너무 추상적입니다.
님이 찾아본 소스나 비슷한 기능을 하는 사이트를 찾아보시는게 상호 이해가 빠르겠네요
사각형을 그리고 그 안에 들어가는 체크 박스를 다 선택하고 싶으신건가요?
아니면 사각형 없이 그냥 체크 한상태로 죽 내리면 선택되게 하고 싶으신건가요?
전자보단 후자가 쉽겠죠
답변에 대한 댓글 1개
[code]
<form name="dragchkform" method="get">
<input type="checkbox" name="dragchk"> 체크박스 1<br>
<input type="checkbox" name="dragchk"> 체크박스 2<br>
<input type="checkbox" name="dragchk"> 체크박스 3<br>
<input type="checkbox" name="dragchk"> 체크박스 4<br>
<input type="checkbox" name="dragchk"> 체크박스 5<br>
<input type="checkbox" name="dragchk"> 체크박스 6<br>
<input type="checkbox" name="dragchk"> 체크박스 7<br>
<input type="checkbox" name="dragchk"> 체크박스 8<br>
<input type="checkbox" name="dragchk"> 체크박스 9<br>
<input type="checkbox" name="dragchk"> 체크박스 10<br>
</form>
<script language="javascript">
var dragchkstat = "off";
function dragchkNOOP() { return false; }
function dragchkOnMouseDown() {
if (this.checked) {
dragchkstat = "uncheck"; this.checked = false;
} else {
dragchkstat = "check"; this.checked = true;
}
return false;
}
function dragchkOnMouseOver() {
switch (dragchkstat) {
case "off":
break;
case "check":
this.focus(); this.checked = true; break;
case "uncheck":
this.focus(); this.checked = false; break;
}
return false;
}
function dragchkOnMouseUp() { dragchkstat = "off"; return true; }
for (i = 0; i < document.dragchkform.dragchk.length; i++) {
document.dragchkform.dragchk[i].onclick = dragchkNOOP;
document.dragchkform.dragchk[i].onmousedown = dragchkOnMouseDown;
document.dragchkform.dragchk[i].onmouseover = dragchkOnMouseOver;
document.onmouseup = dragchkOnMouseUp;
}
</script>
[/code]
이 소스처럼 하고 싶어서 말이죠...
마우스로 체크박스를 드래그 하면 되는 방식이요..
저의 소스는
--
<li class="list-item<?php echo $li_css;?>">
<?php if ($is_checkbox) { ?>
<div class="wr-chk">
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
--
위의 체크박스 부분을 수정하면 될 듯 한데 안돼네요...
아미나 플랫폼 입니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
-----
<?php if ($is_checkbox) { ?>
<div class="wr-chk">
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id
----
이 부분이 수정을 어떻게 해야 할지 몰라서...
name = "a1" 이건 안먹히고 위와 같은 형식이라..이리 저리 해도 불가하네요.ㅠㅠ