jQuery로 확인란 그룹의 값 선택
Zend_Form을 사용하여 일련의 확인란을 출력합니다.
<label style="white-space: nowrap;"><input type="checkbox" name="user_group[]" id="user_group-20" value="20">This Group</label>
일반 HTTP Post를 사용하면 이러한 값이 배열로 전달되지만 jQuery를 사용하여 모든 값을 가져 오는 방법에 대해 다소 난처한 경우가 있습니다. 다음을 사용하여 그룹을 선택할 수 있다고 생각했습니다.
$("input[@name='user_group[]']").val()
그러나 그것은 체크되지 않았는 지에 관계없이 목록의 첫 번째 확인란의 값을 가져옵니다. 어떤 아이디어?
체크 된 선택기를 사용하여 선택한 항목 만 가져올 수 있습니다 (카운트를 알 필요가 없거나 모든 항목을 반복 할 필요가 없음).
$("input[name='user_group[]']:checked")
선택된 항목을 사용하여 해당 값의 컬렉션을 만들거나 컬렉션에 대해 작업을 수행 할 수 있습니다.
var values = new Array();
$.each($("input[name='user_group[]']:checked"), function() {
values.push($(this).val());
// or you can do something to the actual checked checkboxes by working directly with 'this'
// something like $(this).hide() (only something useful, probably) :P
});
선택기에 사용 된 "@"에 대해 잘 모르겠습니다. 적어도 최신 jQuery에서는 두 개의 다른 확인란 배열로 작동하도록 @를 제거해야했습니다. 그렇지 않으면 각 배열에 대해 모든 선택된 항목이 선택되었습니다.
var items = [];
$("input[name='items[]']:checked").each(function(){items.push($(this).val());});
var about = [];
$("input[name='about[]']:checked").each(function(){about.push($(this).val());});
이제 항목과 작업에 관한 것입니다.
다음을 사용하십시오 .map()( http://api.jquery.com/map/ 의 예제에서 수정 됨 ).
var values = $("input[name='user_group[]']:checked").map(function(index,domElement) {
return $(domElement).val();
});
로 map대신에 each배열 생성 단계를 회피 할 수있다 :
var checkedCheckboxesValues =
$('input:checkbox[name="groupName"]:checked')
.map(function() {
return $(this).val();
}).get();
로부터 map()해당 문서의 페이지 :
현재 일치하는 집합의 각 요소를 함수를 통해 전달하여 반환 값을 포함하는 새 jQuery 객체를 생성합니다.
get() 그 값을 배열로 바꿉니다.
mhata dzenyu mese. 실제로
var selectedGroups = new Array();
$(".user_group[checked]").each(function() {
selectedGroups.push($(this).val());
});
방금 선택한 답변을 약간 줄였습니다.
var selectedGroups = new Array();
$("input[@name='user_group[]']:checked").each(function() {
selectedGroups.push($(this).val());
});
그리고 그것은 매력처럼 작동합니다, 감사합니다!
나는 당신이 어떻게 가치를 "잡기"를 원하는지 100 % 확실하지 않다. 그러나 확인란을 반복하려면 .each를 다음과 같이 사용할 수 있습니다.
("input[@name='user_group[]']").each( function() {
alert($(this).val());
});
물론 더 나은 선택기를 사용할 수 있습니다.
$(':checkbox')
var values = $("input[name='user_group']:checked").map(function(){
return $(this).val();
}).get();
이것은 배열에서 체크 박스의 모든 값을 제공합니다.
내보내는 체크 박스의 수를 저장하는 자바 스크립트 변수를 가질 수 있습니다. 즉 <head>, 페이지에서
<script type="text/javascript">
var num_cboxes=<?php echo $number_of_checkboxes;?>;
</script>
그래서에서 시작 (10 개) 체크 박스가있는 경우 user_group-1에 user_group-10이 방법으로 자신의 가치를 얻을 것입니다 자바 스크립트 코드는 :
var values=new Array();
for (x=1; x<=num_cboxes; x++)
{
values[x]=$("#user_group-" + x).val();
}
$(document).ready(function(){
$('#btnskillgroup').click(function(){
getCheckedGroups('skills');
});
$('#btncitiesgroup').click(function(){
getCheckedGroups('cities');
});
var getCheckedGroups = function(groupname){
var result = $('input[name="'+groupname+'"]:checked');
if (result.length > 0) {
var resultstring = result.length +"checkboxes checked <br>";
result.each(function(){
resultstring += $(this).val()+" <br>"; //append value to exsiting var
});
$('#div'+groupname).html(resultstring);
}else{
$('#div'+groupname).html(" No checkbox is Checked");
}
};
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Skills:<input type="checkbox" name="skill" value="Java"> Java
<input type="checkbox" name="skill" value="Jquery"> Jquery
<input type="checkbox" name="skill" value="PHP"> PHP
<br>
<input type="checkbox" name="cities" value="Pune"> Pune
<input type="checkbox" name="cities" value="Baramati"> Baramati
<input type="checkbox" name="cities" value="London"> London
<input type="submit" id="btnskillgroup" value="Get Checked Skill group">
<input type="submit" id="btncitiesgroup" value="Get cities checked group">
<div id="divskills"></div>
<div id="divcities"></div>참고 URL : https://stackoverflow.com/questions/416752/select-values-of-checkbox-group-with-jquery
'UFO ET IT' 카테고리의 다른 글
| 웹훅과 웹 소켓의 차이점 (0) | 2020.11.22 |
|---|---|
| C #에서 배열을 추가하는 가장 효율적인 방법은 무엇입니까? (0) | 2020.11.22 |
| 방법 / 속성을 가상으로 표시하면 성능에 어떤 영향이 있습니까? (0) | 2020.11.22 |
| iPhone-동시에 여러 글꼴이있는 텍스트를 포함하는 UILabel (0) | 2020.11.22 |
| C #의 ASCII 문자 코드에서 Char를 얻는 방법 (0) | 2020.11.22 |