하위 jQuery에서 체크 박스 값을 가져 오는 방법




jquery radio checked (13)

$("#t").text($("#cb").find(":checked").val())

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의 코드 아래가 작동하지 않습니다. 좋은 해결책이 있습니까?


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

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

원래 도시들은 MySQL 데이터베이스에서 가져와 PHP while 루프로 반복됩니다.

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에 대한 걱정없이 끝내야합니다.


체크 박스가 체크되고있을 때 즉시 체크 박스의 값을 삽입하려면 다음과 같이하십시오 :

$(":checkbox").click(function(){
  $("#id").text(this.value)
})

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

 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 클래스를 사용하는 일반적인 항목에 매핑하고 라이브 함수를 사용하여 해당 변경 사항에 대한 DOM을 모니터링하는 데 사용됩니다.


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


감사합니다 altCognito, 귀하의 솔루션이 도움이되었습니다. 체크 박스의 이름을 사용하여이 작업을 수행 할 수도 있습니다.

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

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

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

이렇게하면 페이지에서 첫 번째로 선택된 체크 상자의 값을 가져 와서 id='textarea' 텍스트 영역에 삽입합니다.

예제 코드에서는 폼에 체크 상자를 넣어야합니다.


 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

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

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

(map ()은 배열을 반환하는데, 텍스트 영역의 텍스트보다 더 편리한 것으로 나타납니다).


귀하의 질문은 매우 모호하지만 나는 이것이 당신이 필요하다고 생각 :

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

편집 : 오, 알았어 .. 거기에 간다 ... 전에 HTML을 가지고 있지 않았다. 어쨌든, 네, 클릭 할 때 텍스트 영역에 값을 넣으려고한다고 생각했습니다. 체크 박스의 값을 페이지로드시 textarea (어쩌면 좋은 쉼표로 구분)에 넣으려면 다음과 같이 간단하게 지정하면됩니다.

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

편집 2 사람들이 한 것처럼 내가 쓴 긴 선택자를 단축키로 사용할 수도 있습니다.

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

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


이거 한번 해봐..

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

<html>
<head>
<title>jQuery check / uncheck a check box example</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

<body>

<h1>jQuery check / uncheck a check box example</h1>

<script type="text/javascript">

  $(document).ready(function(){

    $("#isCheck").click(function () {

    alert($('input:checkbox[name=checkme]').is(':checked'));

    });

    $("#checkIt").click(function () {

    $('input:checkbox[name=checkme]').attr('checked',true);

    });

    $("#UnCheckIt").click(function () {

    $('input:checkbox[name=checkme]').attr('checked',false);

    }); 

  });
</script>
</head><body>

<input type="checkbox" name="checkme">Check Me</input>

<br/>
<br/>
<br/>

<input type='button' value='Is Check' id='isCheck'>
<input type='button' value='Check It' id='checkIt'>
<input type='button' value='UnCheck It' id='UnCheckIt'>

</body>
</html>

선택한 모든 체크 상자 값을 쉼표로 구분 된 문자열로 반환 할 수도 있습니다. 이렇게하면 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>




checkbox