checked 선택자

선택자 :checked는 선택된, 즉 checked 또는 selected 속성을 가진 요소를 선택합니다. 선택자 :checked는 체크박스 (checkbox)와 라디오 버튼 (radio), 그리고 option 태그를 가진 요소와 함께 작동합니다. select 요소의 선택된 옵션만 얻으려면, selected 선택자를 사용하세요.

문법

다음은 checked 속성을 가진 요소를 선택하는 방법입니다:

javascript$(':checked');

예제

체크박스를 선택할 때마다 선택된 체크박스의 개수를 표시해 봅시다. 첫 번째 클릭 전에는 기본적으로 선택된 체크박스(두 번째와 네 번째)가 표시됩니다:

html<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>

cssdiv {
  color: green;
}

javascriptlet countChecked = function() {
  let n = $('input:checked').length;
  $('div').text('선택됨: ' + n);
};
countChecked();

$('input[type=checkbox]').on('click', countChecked);

예제

클릭할 때마다 선택된 각 라디오 버튼의 값을 아래에 표시해 봅시다:

html<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>

cssinput, label {
  line-height: 1.5em;
}

javascript$('input').on('click', function() {
  $('#text').html($('input:checked').val() + ' is checked!');
});

참고 항목