※ 선택된 숫자보다 큰 숫자 입력 시엔 잘 작동. 그렇지 않은 경우엔 작동 X
<script src="http://code.jquery.com/jquery-latest.js"></script>
<select class="change">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="checkbox" class="chk" value="1">
<input type="checkbox" class="chk" value="2">
<input type="checkbox" class="chk" value="3">
<input type="checkbox" class="chk" value="4">
<input type="checkbox" class="chk" value="5">
<script>
$(document).ready(function(){
$(".change").change(function(){
var selVal = $(".change option:selected").val();
$(".chk").each(function(idx,item) {
var val = $(this).val();
if(val <= selVal){
$(this).prop("checked",true);
}else{
$(this).prop("checked",false);
}
});
});
});
</script>
결과보기
PS. 아래처럼, 색인값과 선택값 비교하면 하위값으로는 변경 X
<script src="http://code.jquery.com/jquery-latest.js"></script>
<select class="hz">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<?php for($i=0; $i<5; $i++){?>
<input type="checkbox" class="chk" value="<?php echo $i?>">
<?php } ?>
<script>
$(document).ready(function(){
$(".hz").change(function(){
var val = $(".hz option:selected").val();
$(".chk").each(function(idx,item) {
if(idx < val){
$(this).attr("checked",true);
}else{
return false;
}
});
});
});
</script>
결과보기
