그누x쵸딩입니다. 즐거운 한주 되세요~

그누x쵸딩입니다. 즐거운 한주 되세요~

QA

그누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로 적용하여 사용할 수도 있습니다.

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;?>"]'); 이부분을 클래스로 처리할 수 없을까요?

답변을 작성하시기 전에 로그인 해주세요.
전체 1,178
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT