'jquery radio'에 해당되는 글 1건


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.






도움이 되셨다면, 구독과 좋아요.... 아니아니 ...

공감 버튼 꾸욱 눌러주세요 ~~





블로그 이미지

미나미나미

,