[Selector] JQ - :checked 선택자 - $(":checked") - checked="checked"인 모든 체크된 input 요소들 ※ 체크박스 최소 1개 이상 선택 필수

목차

1. :checked 예제 - 체크된 체크박스 배경색 지정
2. :checked 정의
3. :checked 구문
4. :checked 예제 - checkbox 최소 1개 이상 선택 필수

:checked 예제 - 체크된 체크박스 배경색 지정

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $(":checked").wrap("<span style='background-color:red'>");

});

</script>

<form action="">

  이름 : <input type="text" name="user"><br>

  HTML : <input type="checkbox" name="code" value="html"><br>

  CSS : <input type="checkbox" name="code" value="css"><br>

  JS: <input type="checkbox" name="code" value="js" checked="checked"><br>

  <input type="submit">

</form>

결과보기

참고 : Firefox는 checkbox 배경색 지원 X.

:checked 정의

 

체크 된 checkbox, radio 타입의 input 요소 선택.  

 

---

[주의]

 

:selected 선택자 : checkbox 또는 radion 속성의 버튼에서 작동 X. 

※ option 요소에서만 작동.

:checked 선택자 : checkbox 또는 radion 속성의 버튼에서 작동  O. 

※ option 요소에서도 작동.

 

:checked 구문

 

$(":checked") 

 

:checked 예제 - checkbox 최소 1개 이상 선택 필수

 

 <script src="https://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(document).ready(function () {

    $('#clickBtn').click(function() {

      checked = $("input[type=checkbox]:checked").length;

      if(!checked) {

        alert("최소 1개 이상 선택 필수");

        return false;

      }

    });

});

</script>

<label for='mb_1'><input name="mb[]" type="checkbox" value="mb_1" id ="mb_1" required> mb_1</label>

<label for='mb_2'><input name="mb[]" type="checkbox" value="mb_2" id ="mb_2" required> mb_2</label>

<label for='mb_3'><input name="mb[]" type="checkbox" value="mb_3" id ="mb_3" required> mb_3</label>

<label for='mb_4'><input name="mb[]" type="checkbox" value="mb_4" id ="mb_4" required> mb_4</label>

<input type="button" value="클릭" id="clickBtn">

 

결과보기

PS1. 핑크색 코드 경우, 「if(!checked) {」 대신 「if(checked < 1) {」 코드도 가능.

PS2. PHP 체크박스 배열 처리: https://homzzang.com/b/g5-778

관련글: (220408) https://sir.kr/qa/455814