jQuery에서 체크박스 체크 값을 반복하는 방법
8941 단어 faqjqueryjavascriptphp
이 게시물에서는 jquery를 사용하여 체크박스 체크 값을 반복하는 방법에 대해 공유하겠습니다. 양식을 처리할 때 체크박스의 여러 값을 확인하고 이를 ajax를 사용하여 서버 측에 제출하는 방법을 배울 때 알아야 할 중요한 사항 중 하나입니다.
위의 예에서 볼 수 있듯이 동물 목록이 있고 버튼을 선택하여 제출하면 결과가 표시됩니다. 버튼을 제출한 후 이것이 이제 결과입니다.
보시다시피 체크된 동물을 나열했습니다. 이제 이 함수의 전체 코드를 살펴보겠습니다.
작동 방식을 알 수 있도록 각 댓글을 확인해야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Loop Checkbox Value in jQuery</title>
<style type="text/css">
.result-wrapper {
display: none;
}
</style>
</head>
<body>
<form>
<label>What animals you have at home?</label>
<div>
<input type="checkbox" name="animals" class="animals" value="Dog"> Dog
</div>
<div>
<input type="checkbox" name="animals" class="animals" value="Cat"> Cat
</div>
<div>
<input type="checkbox" name="animals" class="animals" value="Pig"> Pig
</div>
<br/>
<button type="button" id="submit">Submit</button>
</form>
<div class="result-wrapper">
<h3>Result:</h3>
<div id="result"></div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit").on("click", function() {
// define the checkbox using name="animals"
// note: you can do it with class also like this $('.animals')
var animals = $('[name="animals"]');
// define html variable to store the result
var html = "<ul>";
$.each(animals, function() {
var $this = $(this);
// check if the checkbox is checked
if($this.is(":checked")) {
// put the checked animal value to the html list
html += "<li>"+$this.val()+"</li>";
}
});
html += "</ul>";
// put the result in #result element
$(".result-wrapper #result").html(html);
// show the result-wrapper class element
$(".result-wrapper").show();
});
});
</script>
</body>
</html>
이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/jquery/how-to-loop-checkbox-checked-value-in-jquery를 방문하십시오.
행복한 코딩 :)
Reference
이 문제에 관하여(jQuery에서 체크박스 체크 값을 반복하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/how-to-loop-checkbox-checked-value-in-jquery-3g58텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
