web-dev-qa-db-ja.com

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の以下のコードは機能しません。良い解決策はありますか？

jqueryhtmlcheckbox
235
lanqy

これはうまくいくものです（ 例 を見てください）：

 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で監視することです。

313
cgp

選択したすべてのチェックボックスの値をカンマ区切りの文字列で返すこともできます。これをSQLのパラメータとして送信すると、作業が簡単になります。

これは、 "chkboxName"という名前を持つすべての選択されたチェックボックス値をカンマ区切りの文字列で返すサンプルです。

そしてここにJavaScriptがあります

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>
119
Mohamed ElSheikh

あなたの質問はかなりあいまいですが、私はこれがあなたが必要とするものであると思います：

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

...私はそのショートカットについて完全に忘れていました。 ;）

63
KyleFarris

これは私にとっては完璧に機能します。

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

ありがとうMohamed ElSheikh

48
Nic

AltCognitoさん、ありがとうございました。チェックボックスの名前を使用してこれを行うこともできます。

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

私はここでやや異なる解決策を探していたので、以下が役に立つかもしれません。私のスクリプトは入力要素を自動的にループし、それらの値を返す必要がありました（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関数はチェックされている場合にのみ値を返します。他のすべての要素の場合、値はチェックされたステータスに関係なく返されます。

6
Andy

値を変数に保存する必要がある場合の代替手段は次のとおりです。

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

（map（）はtextareaのテキストよりも扱いやすい配列を返します）。

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

とにかく、あなたはおそらくこのようなものが必要です。

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

これはページの最初のチェックされたチェックボックスの値を取得してid='textarea'でtextareaに挿入します。

サンプルコードでは、チェックボックスをフォームに配置する必要があります。

2
Pim Jager

私が他の記事からの回答を使用して、同じことを達成するために使用しているはるかに簡単で短い方法は、次のとおりです。

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の終了について心配する必要はありません。

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

チェックされているときにすぐにチェックボックスの値を挿入したい場合は、これでうまくいくはずです。

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

これを試してください。

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
sonida

私は同様の問題を抱えており、これが私が上の例を使用してそれを解決した方法です：

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