그누x쵸딩입니다. 즐거운 한주 되세요~
본문
체크박스 전체선택 해제만 있는데요,,,
제가 식상한거는 안조아해서요,,,ㅋㅋ
체크박스가 아주 많다면
인풋하나 두고 거기에 13쓰고 엔터때리면
위에서부터 체크박스가 13개 선택되는
이런 소스없을까요?
비슷한거 찾았는데
https://jsfiddle.net/3615ze29/2/
요걸 어뜨케 고치면 될까요? ㅎㅎㅎ
답변 2
<input type="text" id="numberInput" />
<script>
$(document).ready(function() {
$("#numberInput").keydown(function(key) {
if (key.keyCode == 13) {
numChks(this.value);
}
});
});
function numChks(value){
var list = $('input[type="checkbox"]');
if(value<=list.length){
for(var i=0;i<=value;i++){
$(list[i]).attr('checked',true);
}
}
}
</script>
input에서 enter키 입력하면 동작할겁니다. 다른 부분들도 응용하시면 될 거 같습니다
무척 고맙습니다~
덕분에 저도 공부가 되었는데,
위 코드로 테스트 해보니,
처음 입력 숫자보다 작은 숫자를 입력하면 안 바뀌는 것 같아요.
큰 숫자를 입력하면 큰 숫자 만큼 바뀌구요...
위 소스 상으로는 그럴 이유가 없어 보이는데... 왜 그런걸까요?
sinbi //
아마 체크박스에 체크가 되어있기에 입력숫자보다 적게 입력해도 ui특성상 이미 체크되어 있는 것으로 보이기에 반복문 돌기전에 체크박스에 걸려있는 체크를 먼저 풀어주세요.
function numChks(value){
var list = $('input[type="checkbox"]');
$('input[type="checkbox"]').attr('checked', false);
for(var i=0;i<=value;i++){
$(list[i]).attr('checked',true);
}
}
조건문을 응용하시면 더 넓게 쓰실 수 있을 겁니다.
제코드가 for문안에 써야 해서 적용하니 안되네요..
$('#chk_num').on("keyup", function () {
var list = $('input[name="<?php echo 'sport'.$k;?>"]');
var number = $('#chk_num').val();
if(number<list.length)
for(var i=0;i<number;i++){
$(list[i]).attr('checked',true);
}
});
이렇게 하면 되는데..
문제는 기입한 만큼만 체크되어야 하는데
name이 모두 달라서 그러는지...
모두 체크되어 버리네요,,,
$('input[name="<?php echo 'sport'.$k;?>"]'); 이부분을 클래스로 처리할 수 없을까요?
그누x쵸딩 //
네임을 클래스로 변경하신다면
var list = $('input[name="<?php echo 'sport'.$k;?>"]');
이부분을
var list = $('."<?php echo 'sport'.$k;?>"');
로 변경하심 될겁니다.
.를 #으로 바꾸면 id로 적용하여 사용할 수도 있습니다.
아 감사합니다 ㅎㅎ
var list = $('.sport'); 바로 이렇게 하면됩니다..
이걸 두고 별짓을 다했습니다..ㅋ
너무 잘돼서 다시 왔습니다.ㅋㅋ
알려주신대로 for문 위에 넣으니 숫자 감소에도 잘됩니다. 감사합니다.
@sad4u 자세한 설명 감사합니다.
근데, 실제 저렇게 해봐도 작동 안 되는 것 같아요.
select box change 이벤트 걸고 -> 체크박스 each 돌려서
select 값으로 비교하면서 체크하면 될꺼같은데요?
10개 20개 이렇게는 되는데 20개 -> 10개 체크되었을때는 안되니
change 이벤트 발생할때 전부 체크 해제 시킨후 다시 체크하면 될꺼같네요
잠깐 테스트해보니 되기는하네요
<select class="change">
<option value=""></option>
<option value="10">10</option>
<option value="20">20</option>
</select>
<?php for($i=0; $i<=30; $i++){?>
<div>
<input type="checkbox" class="chk" value="<?php echo $i?>" style="border:1px solid red; position:static; height:20px; width:20px">
</div>
<?php } ?>
<script>
$(document).ready(function(){
$(".change").change(function(){
var selVal = $(".change option:selected").val();
$(".chk").each(function(idx,item) {
if(idx < selVal){
$(this).attr("checked",true);
}else{
return false;
}
});
});
});
</script>
아 감사합니다~
제코드에서는 이상하게 안되네요
제코드가 for문안에 적용하려다 보니 안되는가 봐요..
$('#chk_num').on("keyup", function () {
var list = $('input[name="<?php echo 'sport'.$k;?>"]');
var number = $('#chk_num').val();
if(number<list.length)
for(var i=0;i<number;i++){
$(list[i]).attr('checked',true);
}
});
이렇게 하면 되는데..
문제는 기입한 만큼만 체크되어야 하는데
name이 모두 달라서 그러는지...
모두 체크되어 버리네요,,,
$('input[name="<?php echo 'sport'.$k;?>"]'); 이부분을 클래스로 처리할 수 없을까요?
