체크박스... td를 선택해도
본문
<td class="td_chk">
<label for="chk_wr_id_<?php echo $i ?>" class="sound_only"><?php echo $list[$i]['subject'] ?></label>
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
</td>
위는 list.skin.php 에서 일부인데요~..
체크박스에 체크를 하는 옵션 부분입니다.
여기서
체크박스가 아닌 해당 <td class="td_chk"> 부분을 선택해도 체크박스 되도록 하려면 어떻게 해야 할까요~
label로 td를 감싸보기도 하고 id값을 넣어보기도 했는데. 잘 안되네요~
답변 2
$(function() {
$(".td_chk").on("click", function() {
$(this).children("input").attr("checked", true);
});
});
$(function() {
$(".td_chk").on("click", function() {
$(this).children("input").attr("checked", true);
} else {
$(this).children("input").attr("checked", false);
}
);
클릭세 체크는 잘되는데 다시 클릭하면 해제가 되어야 하는데.. 어떤 부분이 잘못되었을까요..
<label for="chk_wr_id_<?php echo $i ?>" class="sound_only" style="width:100%;"><?php echo $list[$i]['subject'] ?>
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
</label>
단순히 체크, 체크 해제가 목적이라면 위처럼 label로 감싸서 위처럼 width를 100%로 주는 게 낫지 않나요?
$(function() {
$(".td_chk").on("click", function() {
var is_chk = $(this).children("input").is(":checked") == true ? false : true;
$(this).children("input").prop("checked", is_chk);
});
});
위 스크립트가 작동 안 할 경우 prop를 attr로 바꾸셔야 할 겁니다. 버전 때문에...
라벨로 감싸니 class="sound_only" 의 영향을 받아서 체크박스가 안보이게 됩니다.
알려주신 소스 부분으로 학인 해보니 잘 되네요~
근데 prop 와 attr 의 차이점이 뭔가요?
애초엔 attr() 메소드 하나로 사용했는데 이걸로 사용하다 보니 버그가 많아지고 그래서 1.6에서 분리를 했다고 합니다.
attr(), prop()
메소드 이름에서부터 나오듯이 전자는 html 속성(attribute), 후자는 js 속성(property)과 관련된 메소드들입니다.
평소엔 굳이 나눠서 쓰실 필요는 없구요, prop를 써야 하는 경우는 checkbox랑 radio 이 두 가지라 보시면 됩니다.
다른 데에선 어지간하면 attr() 하나로 다 커버가 되니까요.
답변 감사합니다. 설명이 좋습니다.
$('.td_chk').on('click', function(e) {
if (e.target.nodeName == 'TD') $(this).children().eq(1).trigger('click');
});
이 방법으로도 잘 되네요~...
왕계란님이 먼저 잘 설명 해주셔서 알려주신 부분도 잘 참고하겠습니다.