[Jquery/제이쿼리] input value값 불러오기
2020. 2. 12. 18:14ㆍHTML_CSS_JS
▼코드
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>TEST</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--▲ HTML 내부에서 jquery를 이용할 수 있게 해주는 코드 -->
</head>
<body>
<ol>
<li>
사과<input name="fruit" value="apple" type="radio" >
</li>
<li>
딸기<input name="fruit" value="str" type="radio">
</li>
</ol>
<input type="submit" value="Click" id="button">
<script>
$('#button').click(function(){
var values=$('input:radio[name="fruit"]:checked').val();
console.log(values);
})
</script>
</body>
</html>
script 부분 코드해석
1. $('#button').click(function --) : button이란 id값을 가진 버튼이 클릭 될 경우 괄호 안에 있는 함수를 실행
2. $('input:radio[name="fruit"]:checked').val() : input의 타입을 radio로 가지고 있는 것 중에서 fruit라는 name의 value값을 불러옴
이때 name값이 문자열이 아닌 변수인 경우
$(`input:radio[name=${변수명}]:checked`).val()로 쓰면 된다.
3. console.log(values) :변수 values를 console창에 출력
▼결과
'HTML_CSS_JS' 카테고리의 다른 글
| [HTML/CSS] div 가운데 정렬 (0) | 2021.08.16 |
|---|---|
| [CSS]Position static, relative, absolute, fixed (0) | 2021.02.15 |