jQuery로 숨겨진 필드 값 설정
세 가지 옵션을 사용하여 jQuery를 사용하여 숨겨진 필드를 설정할 수 있습니다. 첫 번째와 두 번째는 .val() 및 .attr() 메서드를 사용하고 마지막은 CSS 속성 선택기를 사용합니다.
이 문서에서는 코드 예제를 사용하여 모두 사용하는 방법을 설명합니다.
.val() 메서드를 사용하여 숨겨진 필드 설정
jQuery .val() 메서드를 사용하여 숨겨진 필드의 값을 설정할 수 있습니다. 프록시 역할을 할 올바른 CSS 선택기만 있으면 됩니다. 거기에서 값을 변경할 수 있습니다.
다음의 HTML 코드에는 type=hidden인 입력 값이 있습니다. 이것은 그것을 숨겨진 필드로 만듭니다. 그런 다음 .val() 메서드를 사용하여 값을 설정할 수 있습니다.
웹 브라우저에서 코드를 실행하면 JavaScript 경고 메시지에 숨겨진 값이 표시됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-set-hidden-field-value</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
display: flex;
justify-content: center;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
</style>
</head>
<body>
<main>
<form>
<label>
<input type="checkbox" name="google" value="google"> Google
</label>
<label>
<input type="checkbox" name="facebook" value="facebook"> Facebook
</label>
<input type="hidden" name="hidden_input" id="hidden_input">
</form>
</main>
<script>
$(document).ready(function() {
// Set the value of the hidden input
// using the val method.
$("#hidden_input").val("top_companies");
// Show the hidden input as an alert message
alert("The hidden value is: " + $("#hidden_input").val());
});
</script>
</body>
</html>
출력:
CSS 속성 선택기를 사용하여 숨겨진 필드 설정
CSS 속성 선택기를 사용하여 숨겨진 필드를 설정하려면 jQuery .val() 메서드도 필요합니다. HTML ID 또는 CSS 클래스를 사용할 수 없는 경우에 사용할 수 있는 옵션입니다.
다음 HTML은 동일하지만 확인란을 업데이트했습니다. jQuery 코드에서 CSS 속성 선택기를 사용하여 숨겨진 입력을 잡고 .val() 메서드로 해당 값을 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-set-hidden-field-value</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
display: flex;
justify-content: center;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
</style>
</head>
<body>
<main>
<form>
<label>
<input type="checkbox" name="erlang" value="erlang"> Erlang
</label>
<label>
<input type="checkbox" name="elixir" value="elixir"> Elixir
</label>
<input type="hidden" name="hidden_input" id="hidden_input">
</form>
</main>
<script>
$(document).ready(function() {
// Set the value of the hidden input
// using a CSS attribute selector
$("input[id=hidden_input]").val("functional_languages");
// Show the hidden input as an alert message
alert("The hidden value is: " + $("#hidden_input").val());
});
</script>
</body>
</html>
출력:
.attr() 메서드를 사용하여 숨겨진 필드 설정
.attr() 메서드는 숨겨진 값을 설정하는 직접적인 방법입니다. 프로세스는 숨겨진 필드를 잡는 것입니다. .attr() 메서드를 사용하여 새 숨겨진 값을 작성합니다.
여기에서 나중에 코드에서 숨겨진 값을 사용할 수 있습니다. 여기에서 JavaScript 경고 메시지에 표시합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-jQuery-set-hidden-field-value</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
display: flex;
justify-content: center;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
</style>
</head>
<body>
<main>
<form>
<label>
<input type="checkbox" name="hewlett-packard" value="hewlett-packard"> Hewlett-Packard
</label>
<label>
<input type="checkbox" name="asus" value="asus"> ASUS
</label>
<input type="hidden" name="hidden_input" id="hidden_input">
</form>
</main>
<script>
$(document).ready(function() {
// Set the value of the hidden input
// using
$("#hidden_input").attr("value", "computer_companies");
// Show the hidden input as an alert message
alert("The hidden value is: " + $("#hidden_input").val());
});
</script>
</body>
</html>
출력:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn