jQuery에서 확인란 값을 검색하는 방법
jQuery를 사용하여 선택한 확인란 값을 가져오고 즉시 텍스트 영역에 넣는 방법은 무엇입니까?
이 코드처럼:
<html>
<head>
</head>
<body>
<div id="c_b">
<input type="checkbox" value="one_name" checked>
<input type="checkbox" value="one_name1">
<input type="checkbox" value="one_name2">
</div>
<textarea id="t"></textarea>
</body>
</html>
에 약에만.id="c_d"Ajax에 의해 업데이트되었으며 아래 altCognito 코드가 작동하지 않습니다.좋은 해결책이 있습니까?
작동하는 예는 다음과 같습니다(예 참조).
function updateTextArea() {
var allVals = [];
$('#c_b :checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals);
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
갱신하다
몇 달 후 ID가 변경될 경우 위의 작업을 계속할 수 있는 방법에 대한 또 다른 질문이 제기되었습니다.해결책은 업데이트 매핑으로 요약됩니다.TextArea는 CSS 클래스를 사용하는 일반적인 것으로 기능하며, 라이브 기능을 사용하여 DOM의 변경 사항을 모니터링합니다.
선택한 모든 확인란 값을 쉼표로 구분된 문자열로 반환할 수도 있습니다.이렇게 하면 SQL에 매개 변수로 보낼 때도 더 쉽게 사용할 수 있습니다.
다음은 이름이 "chkboxName"인 선택한 모든 확인란 값을 쉼표로 구분된 문자열로 반환하는 샘플입니다.
그리고 여기 자바스크립트가 있습니다.
function showSelectedValues()
{
alert($("input[name=chkboxName]:checked").map(function () {
return this.value;
}).get().join(","));
}
여기 HTML 샘플이 있습니다.
<html>
<head>
</head>
<body>
<div>
<input name="chkboxName" type="checkbox" value="one_name" checked>
<input name="chkboxName" type="checkbox" value="one_name1">
<input name="chkboxName" type="checkbox" value="one_name2">
</div>
</body>
</html>
당신의 질문은 상당히 모호하지만 저는 이것이 당신이 필요로 하는 것이라고 생각합니다.
$(function() {
$('input[type="checkbox"]').bind('click',function() {
if($(this).is(':checked')) {
$('#some_textarea').html($(this).val());
}
});
});
편집: 아, 네..자, 여기...당신은 이전에 HTML을 사용하지 않았습니다.어쨌든, 네, 텍스트 영역이 클릭되면 값을 입력하라는 뜻인 줄 알았어요.선택한 확인란의 값을 페이지 로드의 텍스트 영역에 입력하려면(콤마 구분이 적절할 수 있음) 다음과 같이 간단합니다.
$(function() {
$('#c_b input[type="checkbox"]:checked').each(function() {
$('#t').append(', '+$(this).val());
});
});
편집 2 사람들이 그랬던 것처럼, 당신은 또한 내가 쓴 긴 선택기를 바로 가기 위해 이것을 할 수 있습니다:
$('#c_b :checkbox:checked').each(function() {
$('#t').append(', '+$(this).val());
});
저는 그 지름길을 완전히 잊고 있었습니다. ;)
Alt Cognito에게 감사합니다, 당신의 솔루션이 도움이 되었습니다.확인란 이름을 사용하여 이 작업을 수행할 수도 있습니다.
function updateTextArea() {
var allVals = [];
$('[name=chkbox]:checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals)
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
제가 조금 다른 해결책을 찾아 이곳에 왔기 때문에 다음과 같은 것들이 유용할 수도 있습니다.내 스크립트는 입력 요소를 자동으로 루프해야 했고 값을 반환해야 했습니다(jQuery.post 검색 기능의 경우). 문제는 체크 상태에 관계없이 체크박스가 값을 반환하는 것이었습니다.이것이 제 해결책이었습니다.
jQuery.fn.input_val = function(){
if(jQuery(this).is("input[type=checkbox]")) {
if(jQuery(this).is(":checked")) {
return jQuery(this).val();
} else {
return false;
}
} else {
return jQuery(this).val();
}
};
용도:
jQuery(".element").input_val();
지정된 입력 필드가 확인란인 경우 input_val 함수는 선택된 경우에만 값을 반환합니다.다른 모든 요소의 경우 선택한 상태에 관계없이 값이 반환됩니다.
다음은 값을 변수에 저장해야 할 경우의 대안입니다.
var _t = $('#c_b :checkbox:checked').map(function() {
return $(this).val();
});
$('#t').append(_t.join(','));
(map()은 텍스트 영역의 텍스트보다 더 다루기 쉬운 배열을 반환합니다.)
function updateTextArea() {
var allVals = $('#c_b :checked').map(function() {
return $(this).val();
}).get();
$('#t').val(allVals)
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
$(document).ready(function() {
$(':checkbox').click(function() {
var cObj = $(this);
var cVal = cObj.val();
var tObj = $('#t');
var tVal = tObj.val();
if (cObj.attr("checked")) {
tVal = tVal + "," + cVal;
$('#t').attr("value", tVal);
} else {
//TODO remove unchecked value.
}
});
});
$("#t").text($("#cb").find(":checked").val())
어쨌든, 여러분은 아마 다음과 같은 것이 필요할 것입니다.
var val = $('#c_b :checkbox').is(':checked').val();
$('#t').val( val );
이렇게 하면 페이지에서 첫 번째 선택된 확인란의 값을 얻고 텍스트 영역에 해당 확인란을 삽입합니다.id='textarea'.
예제 코드에서는 확인란을 양식에 넣어야 합니다.
다른 게시물의 답변을 사용하여 동일한 작업을 수행하기 위해 사용하는 훨씬 쉽고 짧은 방법은 다음과 같습니다.
var checkedCities = $('input[name=city]:checked').map(function() {
return this.value;
}).get();
원래 도시들은 MySQL 데이터베이스에서 검색되며, 루프하는 동안 PHP로 루프됩니다.
while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>
이제 위의 jQuery 코드를 사용하여 모든 city_id 값을 가져오고 $.get(...)을 사용하여 데이터베이스에 다시 제출합니다.
코드가 완전히 동적이기 때문에 이것은 제 삶을 매우 쉽게 만들었습니다.더 많은 도시를 추가하기 위해, 제가 해야 할 일은 제 데이터베이스에 더 많은 도시를 추가하는 것이고, PHP나 jQuery end에 대한 걱정은 없습니다.
저도 비슷한 문제가 있었는데 위의 예를 사용하여 다음과 같이 해결했습니다.
$(".ms-drop").click(function () {
$(function showSelectedValues() {
alert($(".ms-drop input[type=checkbox]:checked").map(
function () { return this.value; }).get().join(","));
});
});
이거 한번...
var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
console.log($(this).val());
listCheck .push($(this).val());
});
console.log(listCheck);
확인란을 선택할 때 즉시 해당 확인란의 값을 삽입하려면 다음과 같이 해야 합니다.
$(":checkbox").click(function(){
$("#id").text(this.value)
})
언급URL : https://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jquery
'programing' 카테고리의 다른 글
| Spring Rest Template에서 빈 응답 처리 방법 (0) | 2023.08.15 |
|---|---|
| ASP를 렌더링합니다.HTML5 형식의 NET 텍스트 상자 입력 유형 "번호" (0) | 2023.08.15 |
| MySQL 결정론적 함수 결과 캐시를 지우는 방법은 무엇입니까? (0) | 2023.08.15 |
| 요청 설정 방법.양식을 사용하지 않을 때 true로 인증됨인증.로그인 페이지에서 리디렉션하시겠습니까? (0) | 2023.08.15 |
| 'Invoke-WebRequest' 용어가 cmdlet의 이름으로 인식되지 않습니다. (0) | 2023.08.15 |