๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Lect & Tip/javascript, jQuery

โœˆ ์ œ์ด์ฟผ๋ฆฌ ์ฒดํฌ๋ฐ•์Šค ์ฒดํฌ ์—ฌ๋ถ€ ํ™•์ธ ๋ฐ ์ œ์–ด jquery checkbox checked

by ์•Œ ์ˆ˜ ์—†๋Š” ์‚ฌ์šฉ์ž 2020. 2. 14.
๋ฐ˜์‘ํ˜•

์ œ์ด์ฟผ๋ฆฌ ์ฒดํฌ๋ฐ•์Šค ์ฒดํฌ ์—ฌ๋ถ€ ํ™•์ธ ๋ฐ ์ œ์–ด jquery checkbox checked

์ œ์ด์ฟผ๋ฆฌ ์ฒดํฌ๋ฐ•์Šค checked ์—ฌ๋ถ€ ํ™•์ธ

$("input:checkbox[id='ID']").is(":checked") == true : false  /* by ID */ 
$("input:checkbox[name='NAME']").is(":checked") == true : false /* by NAME */

checked/unchecked ์ฒ˜๋ฆฌ

$("input:checkbox[id='ID']").prop("checked", true); /* by ID */ 
$("input:checkbox[name='NAME']").prop("checked", false); /* by NAME */

์ „์ฒด์„ ํƒ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ์„ ํƒํ•˜๋ฉด ๊ทธ ์•„๋ž˜์˜ ๋ชจ๋“  ์ฒดํฌ๋ฐ•์Šค๋ฅผ ์„ ํƒ ์˜ˆ์ œ

HTML

<label><input type="checkbox" id="checkAll" class="checkAll"> <b>์ „์ฒด์„ ํƒ</b></label>
<ul class="select_subject">
<label><input type="checkbox" class="input_check" name="class[1]" value="1"> <b>1</b></label>
<label><input type="checkbox" class="input_check" name="class[2]" value="2"> <b>2</b></label>
</ul>


jQuery

$(function(){
    $("checkAll").click(function(){
        var chk = $(this).is(":checked");//.attr('checked');
        if(chk) $(".select_subject input").prop('checked', true);
        else  $(".select_subject input").prop('checked', false);
    });
});


๋ผ๋””์˜ค๋ฒ„ํŠผ ์„ ํƒ / ๋ชจ๋“  ๋ผ๋””์˜ค๋ฒ„ํŠผ ์„ ํƒํ•ด์ œ 

$("input:radio[name='NAME']:radio[value='VALUE']").attr("checked",true); 
$("input:radio[name='NAME']").removeAttr("checked");

 

๋งฅ์‹ฌ ๋ชจ๋ธ ๊น€ํ•ด๋‚˜ ์•„๋‚˜์šด์„œ

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€