checked 선택자
선택자 :checked는 선택된,
즉 checked 또는
selected 속성을 가진 요소를 선택합니다.
선택자 :checked는 체크박스
(checkbox)와
라디오 버튼
(radio),
그리고 option 태그를 가진 요소와 함께 작동합니다.
select 요소의 선택된 옵션만 얻으려면,
selected 선택자를 사용하세요.
문법
다음은 checked 속성을 가진 요소를 선택하는 방법입니다:
$(':checked');
예제
체크박스를 선택할 때마다 선택된 체크박스의 개수를 표시해 봅시다. 첫 번째 클릭 전에는 기본적으로 선택된 체크박스(두 번째와 네 번째)가 표시됩니다:
<form>
<p>
<input type="checkbox" name="cbox" value="one">
<input type="checkbox" name="cbox" value="two" checked="checked">
<input type="checkbox" name="cbox" value="three">
<input type="checkbox" name="cbox" value="four" checked>
<input type="checkbox" name="cbox" value="five">
</p>
</form>
<div></div>
div {
color: green;
}
let countChecked = function() {
let n = $('input:checked').length;
$('div').text('선택됨: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
예제
클릭할 때마다 선택된 각 라디오 버튼의 값을 아래에 표시해 봅시다:
<form>
<div>
<input type="radio" name="digits" value="one" id="one">
<label for="one">one</label>
</div>
<div>
<input type="radio" name="digits" value="two" id="two">
<label for="two">two</label>
</div>
<div>
<input type="radio" name="digits" value="three" id="three">
<label for="three">three</label>
</div>
<div id="text"></div>
</form>
input, label {
line-height: 1.5em;
}
$('input').on('click', function() {
$('#text').html($('input:checked').val() + ' is checked!');
});
