jQuery에서 확인란 값을 검색하는 방법

240

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"업데이트됩니다 아약스 , altCognito의 코드의 아래가 작동하지 않습니다. 좋은 해결책이 있습니까?

jquery  html  checkbox 
— 란키
소스
한 번에 모두 또는 하나를 원하십니까?
— TStamper 2009
주어진 값 / 레이블로 상자를 어떻게 '확인'할 수 있습니까? "one_name2"라고 말하세요?
— 6:58에
5
@ 사용 허가 $ ( "input [name = one_name2]"). attr ( 'checked', true);
— Mark Schultheiss
라디오 형식에서도 잘 작동했습니다. 1 투표 :)
— 15:49에

답변:

320

다음은 작동하는 것입니다 ( 예 참조 ).

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

최신 정보

몇 달 후 ID가 변경되면 위의 작동을 유지하는 방법에 관한 또 다른 질문이있었습니다. 솔루션은 updateTextArea 함수를 CSS 클래스를 사용하는 일반적인 것으로 매핑하고 live 함수를 사용하여 이러한 변경 사항에 대해 DOM을 모니터링합니다.

— cgp
소스
2
아하! 우수한. 두 가지 시나리오를 모두 고려했습니다. 잘하셨습니다. ;)
— KyleFarris 2009
주어진 값 / 레이블로 상자를 어떻게 '확인'할 수 있습니까? "one_name2"라고 말하세요?
— 6:58에
6
$ ( ': checked', '#c_b'). map (function (i, cb) {return cb.value}) .get ()과 같은 것들에 map을 사용하고 싶습니다. 또한 이것은 개인적인 취향 일 뿐이지 만 값을 얻는 것은 텍스트 영역 변경과 분리하는 것입니다. $ (function () {$ ( '# c_b input'). click ( '(t #)). val ($ ( ': checked', '#c_b'). map (function (i, cb) {return cb.value}) .get ())); $ ( '# c_b input : first'). triggerHandler ( ' click ');});
— Brandon
$(document).on("click", "#c_b input", updateTextArea);대신 아약스 문제를 해결하기 위해 사용하십시오 .
— Goldentoa11
1
이것이 IE (11)에 있는지 확실하지 않지만 $('#c_b:checked')(간격 강조) 해서는 안 됩니까?
— AceMark
124

선택한 모든 확인란 값을 쉼표로 구분 된 문자열로 반환 할 수도 있습니다. 또한 매개 변수로 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>
— 모하메드 엘 셰이크
소스
주어진 이름의 체크 박스의 모든 값을 얻는 방법을 찾고있는 동안 나는 이것을 우연히 발견했으며 두 가지 작은 문제로 나를 위해 일합니다. 1) 첫 번째 상자가 아닌 다른 상자를 선택할 때마다 첫 번째 상자의 확인 표시가 토글됩니다. 2) 나중에 정보에 액세스 할 수 있도록 이것을 배열로 설정하려고하면 충돌이 발생합니다.
— Reverend Bubbles
3
이것은 정직하게 가장 좋은 답변입니다. 매우 간단합니다. "함수"와 "경고"를 제거하여 일부 사람들을 혼란스럽게했지만 코드는 간단하고 잘 수행되었습니다.
— tmarois
showSelectedValues는 동일한 이름을 가진 라디오 버튼 그룹도 디코딩하는 데 사용됩니다.
— Matthew Lock
65

귀하의 질문은 매우 모호하지만 이것이 필요한 것 같습니다.

$(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());
});

... 나는 그 지름길을 완전히 잊었다. ;)

— 카일 패리스
소스
50

이것은 나를 위해 완벽하게 작동합니다.

alert($("input[name=chkboxName]:checked").map(function() {
    return this.value;
}).get().join(","));

감사합니다 Mohamed ElSheikh

— 닉
소스
1
멋진 남자 ...이 내 아약스 루프에서 일한 유일한 사람이다;) 감사합니다
— Sagive SEO
7
$ ( 'input [name = selection] : checked'). map (function () {return this.value;}). toArray ()
— ygaradon
8

귀하의 솔루션이 도움이 된 altCognito에게 감사드립니다. 확인란 이름을 사용하여이 작업을 수행 할 수도 있습니다.

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});
— 하르 파트 바 티아
소스
6

다음은 약간 다른 솔루션을 찾고 있기 때문에 유용 할 수 있습니다. 내 스크립트는 입력 요소를 자동으로 반복해야하고 값을 반환해야했습니다 (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 함수는 체크 된 경우에만 값을 반환합니다. 다른 모든 요소의 경우 확인 된 상태에 관계없이 값이 반환됩니다.

— 앤디
소스
정말 고마워요, 정말 고마워요 ... 방금 "return jQuery (this) .val ();" "참으로 돌아가다" 내 경우에는 확인란이므로 선택했는지 여부를 알아야합니다. 감사합니다!
— TCB13
5

다음은 값을 변수에 저장해야하는 경우에 대한 대안입니다.

var _t = $('#c_b :checkbox:checked').map(function() {
    return $(this).val();
});
$('#t').append(_t.join(','));

(map ()은 텍스트 영역의 텍스트보다 편리한 배열을 반환합니다).

— pgcd
소스
3 
   $(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.
           }
        });
    });
1
당신은 그것을 너무 복잡했습니다. 또한 일반적으로 value 매개 변수를 사용하여 텍스트 영역의 값을 설정하지 않습니다. 텍스트 상자의 값은 innerHTML입니다. 그리고 일부 요소의 값을 설정하려면 일반적으로 브라우저 추상화 목적으로 'val ()'메소드를 사용하는 것이 가장 좋습니다.
— KyleFarris 2009
3 
 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });
— 사토루
소스
2

어쨌든 다음과 같은 것이 필요할 것입니다.

 var val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

그러면 페이지에서 첫 번째로 선택된 확인란의 값이 표시되고 텍스트 영역에이 확인란이 삽입됩니다 id='textarea'.

예제 코드에서는 확인란을 양식에 넣어야합니다.

— 핌 예거
소스
2
이것은 잘못 is되었으며 부울 값을 반환하며 부울 값에는 val메서드 가 없습니다 .
— undefined
2

다른 게시물의 답변을 사용하여 동일한 작업을 수행하는 데 훨씬 쉽고 짧은 방법은 다음과 같습니다.

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

원래 도시는 MySQL 데이터베이스에서 검색되어 PHP while loop로 반복됩니다.

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에 대해 걱정할 필요가 없습니다.

— 게산
소스
0

나는 비슷한 문제가 있었고 이것이 위의 예를 사용하여 해결 한 방법입니다.

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });
— 샘
소스
0

이거 한번 해봐..

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .push($(this).val());
});
console.log(listCheck);
— 소냐
소스
0

확인란의 값을 확인하면서 즉시 삽입하려면 다음과 같이하십시오.

$(":checkbox").click(function(){
  $("#id").text(this.value)
})
— 오리
소스
여러 값과 확인란의 선택을 취소하지 않습니다
— Rob
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.