jquery 를 이용한 multi checkbox 선택
옆동네 답변용으로 만들어둔건데, 가끔 참조하기 좋은 코드라서 올려드립니다.
그룹별로 check박스를 나누고 선택해제를 할수 있는 코드입니다.
check box가 multi row 형태로 들어가면 필요한 기능입니다.
실행시켜보실려면 codepen link 를 클릭해서보시면 됩니다.
[code]
<div class="row">
<ul>
<li><input data-id="user1" data-type="alarm" type="checkbox" name="alarm" value="alarm">alarm</li>
<li><input data-id="user1" data-type="email" type="checkbox" name="email" value="eail">eail</li>
<li><input data-id="user1" data-type="sms" type="checkbox" name="sms" value="sms">sms</li>
</ul>
</div>
<div class="row">
<ul>
<li><input data-id="user2" data-type="alarm" type="checkbox" name="alarm" value="alarm">alarm</li>
<li><input data-id="user2" data-type="email" type="checkbox" name="email" value="eail">eail</li>
<li><input data-id="user2" data-type="sms" type="checkbox" name="sms" value="sms">sms</li>
</ul>
<hr/>
<div>
<a href="javascript:;" class="btn_checkall" data-id="user1">user1 체크all</a>
<a href="javascript:;" class="btn_uncheckall" data-id="user1">user1 체크해제</a>
</div>
<div>
<a href="javascript:;" class="btn_alarm_checkall" data-type="alarm">alarm 체크all</a>
<a href="javascript:;" class="btn_alarm_uncheckall" data-type="alarm">alarm 체크해제</a>
</div>
[/code]
[code]
$(".btn_checkall").click(function() {
var userid = $(this).data("id");
alert(userid + " check all");
$("input[data-id='" + userid + "']").prop("checked", true);
});
$(".btn_uncheckall").click(function() {
var userid = $(this).data("id");
alert(userid + " uncheck all");
$("input[data-id='" + userid + "']").prop("checked", false);
});
$(".btn_alarm_checkall").click(function() {
var type = $(this).data("type");
alert(type + " check all");
$("input[data-type='" + type + "']").prop("checked", true);
});
$(".btn_alarm_uncheckall").click(function() {
var type = $(this).data("type");
alert(type + " uncheck all");
$("input[data-type='" + type + "']").prop("checked", false);
});
[/code]
댓글 1개