728x90
반응형
안녕하세요. 터미네입니다.
이번 포스팅은 jQuery로 라디오버튼 및 체크박스를 사용하는것을 소개합니다.
코드와 함께 설명 드리겠습니다.
우선 아래 html 코드 기반으로 jQuery 활용예제를 살펴볼게요.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//~~~
});
function checkRadioValue(){ //실습 }
function checkboxValue(){ //실습 }
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="사과"/>사과</label>
<label><input type="radio" name="fruit" value="배"/>배</label>
<label><input type="radio" name="fruit" value="수박"/>수박</label>
<input type="button" value="값확인" onClick="checkRadioValue()"/>
</div>
<div>
<label><input type="checkbox" name="sports" value="축구"/>축구</label>
<label><input type="checkbox" name="sports" value="야구"/>야구</label>
<label><input type="checkbox" name="sports" value="배구"/>배구</label>
<input type="button" value="값확인" onClick="checkboxValue()"/>
</div>
</body>
</html>
jQuery radio버튼 활용
radio버튼은 name이 동일할 경우
무조건 하나만 선택이 가능합니다.
사과를 선택하면 라디오버튼이 체크될텐데,
이때 배를 또 선택하면 사과에 체크된 것이 사라집니다.
사과, 배, 수박 중 하나를 선택 후에 "값확인" 버튼은 눌러
값을 확인하는 function을 구현해보겠습니다.
function checkRadioValue(){
console.log($("input[name=fruit]:checked").val());
//alert($("input[name=fruit]:checked").val());
}크롬 브라우저에서 F12를 누르면 개발자도구가 뜨는데
콘솔 혹은 Console 메뉴에 가시면 값을 확인할 수 있습니다.
라디오 버튼 "배"를 선택 후, "값확인"을 누른 결과를
아래 캡처이미지처럼 확인할 수 있습니다.
참 쉽죠?
jQuery checkbox 버튼 활용
checkbox는 name이 동일해도
1개 선택 혹은 2개 이상 선택이 가능합니다.
값을 확인하는 function을 구현해보겠습니다.
function checkboxValue(){
$("input[name=sports]:checked").each(function(){
console.log($(this).val());
});
}
체크박스 "축구","야구" 선택 후, "값확인"을 누른 결과를
아래 캡처이미지처럼 확인할 수 있습니다.
jQuery를 사용해서
라디오버튼, 체크박스 사용하는 방법에 대한 포스팅은 여기까지입니다.
감사합니다.
728x90
반응형
'자바 웹 > front-end' 카테고리의 다른 글
| 자바스크립트 백틱(backtick) 사용 (0) | 2023.02.01 |
|---|---|
| jQuery change함수 사용하기 (0) | 2023.01.18 |
| jQuery each문 사용법 (0) | 2023.01.17 |
| jQuery this 사용법 (0) | 2023.01.11 |
| jQuery ajax 사용법 정리 (0) | 2023.01.09 |