jquery 모든 radio button 모두 값 가져오기
= jquery 모든 radio button 모두 초기화 하기 보러가기
jQuery로 모든 라디오 버튼을 값을 가져 오는 방법
1번째, 학교로 구성된 radio button 값 가져오기
2번째, name으로 모든 radio button 값 가져오기
3번째, id으로 모든 radio button 값 가져오기
<div>
<label>초등학교 </label>
<input id="school" type="radio" name="school" value="초등학교" checked/>
<label>중학교 </label>
<input id="school" type="radio" name="school" value="중학교" />
<label>취미 </label>
<input id="school" type="radio" name="school" value="고등학교" />
<label>대학교 </label>
<input id="school" type="radio" name="school" value="대학교" />
</div>
<br>
<div>
<label>남 </label>
<input id="sex" type="radio" name="sex" value="남" checked/>
<label>여 </label>
<input id="sex" type="radio" name="sex" value="여" />
</div>
<br>
<div>
<label>1학년 </label>
<input id="grade" type="radio" name="grade" value="1학년" checked/>
<label>2학년 </label>
<input id="grade" type="radio" name="grade" value="2학년" />
<label>3학년 </label>
<input id="grade" type="radio" name="grade" value="3학년" />
</div>
<button id="school_save">학교 값 가져오기</button>
<button id="grade_save">학년 초기화</button>
<button id="name_all_save">name으로 초기화</button>
<button id="id_all_save">id으로 초기화</button>
1번째 - input name의 값을 통해서 라디오 정보를 가져옵니다.
아래와 같은 방법으로 실행합니다.
$("#school_save").click(function () {
alert($('input[name=school]:checked').val());
});
2번째 - input name의 값을 통해서 모든 라디오의 정보를 가져옵니다.
아래와 같은 방법으로 실행합니다.
$("#name_all_save").click(function () {
var radio_name = [];//array
var raido_name_val = {};//object
var radio = $("input[type=radio]"); //라디오 정보를 가져옵니다.
$.each(radio, function (key, value) { // input radio의 name 값을 가져옵니다.
radio_name.push($(value).attr('name'));
});
console.log(radio_name);
radio_name = $.unique(radio_name.sort()).sort(); //중복요소 이름을 제거
console.log(radio_name);
for (var i = 0; i < radio_name.length; i++) {
alert($('input[name="' + radio_name[i] + '"]').val());
raido_name_val[radio_name[i]] = $('input[name="' + radio_name[i] + '"]').val();
}
console.log(raido_name_val);//예시 로그 {grade: "1학년", school: "초등학교", sex: "남"}
});
3번째 - input id의 값을 통해서 모든 라디오의 정보를 가져옵니다.
아래와 같은 방법으로 실행합니다.
$("#id_all_save").click(function () {
var radio_id = []; //id 값을 넣을 배열
var radio_id_val = {};//object
var radio = $("input[type=radio]"); // 모든 라디오 접근
$.each(radio, function (key, value) {
radio_id.push($(value).attr('id')); // id 값만을 추출
});
radio_id = $.unique(radio_id.sort()).sort(); //중복요소제거
var input_radio; // 라디오 id로 접근하기 위해서
for (var i = 0; i < radio_id.length; i++) {
input_radio = $("input[id=" + radio_id[i] + "]"); // id값으로 확인
$.each(input_radio, function (key, value) {
if ($(this)[0].checked === true) { //체크가 되어 있는지 아닌지확인
radio_id_val[radio_id[i]] = $(this)[0].value; // 라디오 id 값과 value 값을 매칭
}
});
}
console.log(radio_id_val); //{grade: "1학년", school: "초등학교", sex: "남"}
});
See the Pen radio_save by Nami (@NamuNami) on CodePen.
도움이 되셨다면, 구독과 좋아요.... 아니아니 ...
공감 버튼 꾸욱 눌러주세요 ~~
'[javascript]' 카테고리의 다른 글
| i'mport(아임포트) 결제 모듈 간편하게 사용해보기 (5) | 2018.07.01 |
|---|---|
| 자바스크립트(javascript)로 pdf 파일 만들기 (0) | 2018.06.19 |
| jquery 모든 radio button 모두 초기화 하기 (0) | 2018.05.01 |
| jquery input 값 변경 확인하기 (onchange 함수) (0) | 2018.04.30 |
| jquery 선택자(selectors) 부모(parent) > 자식(child) 배경화면 랜덤으로 바꾸기 (0) | 2018.04.27 |
미나미나미