Jquery input name 값 가져오기 - jquery input name gabs gajyeoogi

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="testID" class="testClass" name="testName" value="테스트"/>
</body>
</html>

input의 value 기준으로 작성하였습니다.

목차 Show

$('#testID').val(); // id 선택자가 기준일 땐 #을 붙여줍니다.
$('.testClass').val(); // class 선택자가 기준일 땐 .을 붙여줍니다.
$('[name=testName]').val(); // id, class 외엔 이런식으로 가져올 수 있습니다.
$('[test=testName]').val(); // 만약 test

결과

결과값을 잘 가져온것을 볼 수 있습니다.

1. 히든 타입 데이터 JQuery로 가져오기

1. id 로 접근해서 가져오기

= var value = $('#user_id').val();

2. class 로 접근해서 가져오기

= var value = $('.t_class').val();

3. name으로 접근해서 가져오기

=var value = $('input[name=t_name]').val();

==========================개발 새발 개발왕===============================

지난 시간에는 id, name, class를 이용해서 각각의 input value들을 가져와 봤습니다.

이번에는 id를 이용해서 name / class를, name을 이용해서 ,id/ class를, class를 이용해서 id와 name을 가져와 보도록 하겠습니다.

(정확히 기억은 안 나는데, 이것들이 필요한 때가 있더군요.)

먼저 div를 선언합니다.

jquery 사용 유무에 따라 나눠서 말씀 드리겠습니다.

Jquery 사용시.

//id로 접근하여 가져오기

var name_by_id = $('#test_id').attr('name');

var class_by_id = $('#test_id').attr('class');

//class로 접근하여 가져오기

var name_by_class = $('.test_class').attr('name');

var id_by_class = $('.test_class').attr('id');

//name으로 접근하여 가져오기

var id_by_name = $('[name="test_name"]').attr('id');

var class_by_name = $('[name="test_name"]').attr('class');

순수 javascript 사용시

//id로 접근하여 가져오기(getElementById의 element는 단수형입니다. class와 name은 복수형이고요. 주의하세요)

var name_by_id = document.getElementById("test_id").getAttribute('name');

var class_by_id = document.getElementById('test_id').ClassName;

//class로 접근하여 가져오기

var name_by_class = document.getElementsByClassName('test_class')[0].getAttribute('name');;

var class_by_class = document.getElementsByClassName('test_class')[0].id;

//name으로 접근하여 가져오기

var id_by_name = document.getElementsByName('test_name')[0].id;

var class_by_name = document.getElementsByName('test_name')[0].className;

끝입니다.

* class나 name을 중복해서 사용하시는 경우 index값 설정에 주의해서 접근하셔야합니다.

https://codethief.io/ko/get-id-name-and-class-values-using-javascript-jquery/

안녕하세요, Haddoddo입니다.

오늘은 javascript와 jquery에서 자주 사용하는

id, name, class를 사용해 value를 가져오는 방법에 대해 정리해보도록 하겠습니다.

○ id

흔히 HTML에서 사용하는 id는 객체에 이름을 부여할 때 사용하지만 중복을 허용하지 않습니다.

id값을 왜 중복으로 사용하면안될까요? 이유는 여러 가지가 있습니다.

1. name의 값은 중복될경우 배열로 처리가 가능하지만 id는 그렇게 사용할 수 없습니다.

2. id는 javascript와 css에서 접근하기 용이합니다. 하지만 중복된 값이 있다면 제대로 수행을 못합니다.

사용법

- javascript

<input type="text" id="test" value="ABC">


var x = document.getElementById("test").value;
console.log(x)


result :: ABC

- JQuery

<input type="text" id="test" value="ABC">


var x = $('#test').val()
console.log(x)


result :: ABC

○ name

name은 id와는 다르게 중복사용이 가능하지만 id나 class같이 CSS에는 접근할 수 없다는 특징을 가지고 있습니다.

사용법

- javascript

<input type="text" name="data" value="ABC">

// document.getElementsByName("data")[index]
// name은 중복을 허용하기 때문에 javascript에서 사용할땐 배열 인덱스값을 필수로 넣어줘야 합니다.
var x = document.getElementsByName("data")[0].value
console.log(x)


result :: ABC

- JQuery

<input type="text" name="data" value="ABC">


var x = $('inpiut[name=data]').val()

or
// name값이 여러개 존재한다면?
var x = $('input[name=data]').eq('0').val()
console.log(x)


result :: ABC

○ class

class는 보통 css설정을 적용시키기 위해 사용하지만 javascript 또는 JQuery에서 class로 특정 요소를 찾아야 하는 경우도 많이 있습니다.

class도 마찬가지로 name처럼 중복 사용이 가능합니다.

- javascript

<input type="text" class="text" value="ABC">

// class도 name과 동일하게 중복을 허용하여 javascript를 이용하여 사용시엔 배열 인덱스를 필수로 넣어줘야합니다.
var x = document.getElementsByClassName("test")[0].value
console.log(x)


result :: ABC

- JQuery

<input type="text" class="test" value="ABC">


var x = $('.test').val()

or

// 중복된 class 요소중 특정 class 요소의 값을 찾는다면?
var x = $('.test').eq('1').val()
console.log(x)


result :: ABC

이런 식으로 사용 가능합니다.

스크립트는 활용하기 나름인 것 같습니다. 어떨 땐 javascript를 사용해야하지만 또 어떨땐 JQuery를 사용해야 하듯 두 개 모두 사용할 수 있도록 공부를 해두면 필요한 상황에 적재적소로 배치하여 사용하시면 되겠습니다.

구독하기👍 눌러주시고 자주 놀러와 주세요.

공감❤ ,댓글⌨은 저에게 큰 힘이 됩니다.

감사합니다.🤗

.

🙏잘못된 정보의 피드백은 댓글 남겨주세요.🙏

Jquery input(name 여러개)