Head
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>Javascript
function checkStep() {
$( $("[type=checkbox]").get().reverse() ).each(function( index ){
var obj = $(this);
setTimeout(function(){
$(obj).prop("checked", true);
}, 100*index );
});
}Body
<ul>
<li><input type="checkbox" name="test" value="1" /> 1.</li>
<li><input type="checkbox" name="test" value="2" /> 2.</li>
<li><input type="checkbox" name="test" value="3" /> 3.</li>
<li><input type="checkbox" name="test" value="4" /> 4.</li>
<li><input type="checkbox" name="test" value="5" /> 5.</li>
<li><input type="checkbox" name="test" value="6" /> 6.</li>
<li><input type="checkbox" name="test" value="7" /> 7.</li>
<li><input type="checkbox" name="test" value="8" /> 8.</li>
<li><input type="checkbox" name="test" value="9" /> 9.</li>
<li><input type="checkbox" name="test" value="10" /> 10.</li>
<li><input type="checkbox" name="test" value="11" /> 11.</li>
<li><input type="checkbox" name="test" value="12" /> 12.</li>
<li><input type="checkbox" name="test" value="13" /> 13.</li>
<li><input type="checkbox" name="test" value="14" /> 14.</li>
<li><input type="checkbox" name="test" value="15" /> 15.</li>
<li><input type="checkbox" name="test" value="16" /> 16.</li>
<li><input type="checkbox" name="test" value="17" /> 17.</li>
<li><input type="checkbox" name="test" value="18" /> 18.</li>
<li><input type="checkbox" name="test" value="19" /> 19.</li>
<li><input type="checkbox" name="test" value="20" /> 20.</li>
</ul>
<div><button onclick="checkStep()">아래에서 위로 하나씩 체크하기</button></div>설명
each() 문은 같은 객체를 반복해서 어떤 작업을 할 때 사용하는데요.
$(“[type=checkbox]”).each({function(){
…
});
…
});
반대로 거꾸로 반복 작업을 해야할 때는 어떻게 사용해야 할까요?
get().reverse()를 사용하시면 됩니다.
$( $(“[type=checkbox]”).get().reverse() ).each(function( index ){
…
});
…
});
** 출처 : http://zzznara2.tistory.com/455
'IT > jquery' 카테고리의 다른 글
| table merge (0) | 2017.02.26 |
|---|---|
| jquery ComboBox Selected Set (0) | 2017.02.26 |
| table 안의 체크된 체크박스 Row 값 알아내기 (0) | 2016.12.15 |
| table 안의 라디오버튼 하나씩 체크 (0) | 2016.12.15 |
| file 등록 후 img 미리보기 (0) | 2016.12.14 |