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"がAjaxによって更新された場合、以下のaltCognitoのコードは機能しません。良い解決策はありますか？

jquery html checkbox

— ランキー
ソース

一度に全部または1つが必要でしたか？

— TStamper 2009

与えられた値/ラベルでボックスをどのように「チェック」できますか？「one_name2」と言いますか？

— 2010年

5

@Amitd use $（ "input [name = one_name2]"）。attr（ 'checked'、true）;

— Mark Schultheiss

おかげでうまくいきました。1票投票:)

— 2010年

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

与えられた値/ラベルでボックスをどのように「チェック」できますか？「one_name2」と言いますか？

— 2010年

6

$（ '：checked'、 '#c_b'）。map（function（i、cb）{return cb.value}）.get（）のようなものにマップを使用するのが好きです。また、これは単なる個人設定ですが、次のように、値の取得とテキスト領域の変更を分離します：$（function（）{$（ '＃c_b input'）。click（$（ '＃t'）。val （$（ '：checked'、 '#c_b'）。map（function（i、cb）{return cb.value}）.get（）））; $（ '＃c_b input：first'）。triggerHandler（ 'クリック '）;}）;

— Brandon、

$(document).on("click", "#c_b input", updateTextArea);代わりにajax'y問題を回避するために使用してください。

— Goldentoa11 2014年

1

これがIE（11）だけにあるかどうかはわかりませんが、そうするべきではありません$('#c_b:checked')（間隔を強調する）。

— AceMark、2014

124

選択したすべてのチェックボックスの値をカンマ区切りの文字列で返すこともできます。これにより、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>

— モハメド・エルシェイク
ソース

与えられた名前のチェックされたチェックボックスのすべての値を取得する方法を探しているときに私はこれに偶然遭遇し、2つの小さな問題でうまくいきました。1）最初のボックス以外のボックスをチェックするたびに、最初のボックスのチェックマークが切り替わります。2）後で情報にアクセスできるようにこれを配列に設定しようとすると、クラッシュします。

— 牧師の泡

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

クールな男...これは私のajaxループで機能した唯一のものです;）ありがとう

— 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（）;"を変更しました「trueを返す」; 私の場合はチェックボックスなので、チェックされているかどうかを知る必要があります。

— TCB13 2011

5

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

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

（map（）は配列を返します。これは、textareaのテキストよりも便利です）。

— 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

あなたはそれを過度に複雑にしました。また、通常は値パラメーターを使用してtextareaの値を設定しません。テキストボックスの値は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

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

— mkoryak
ソース

1

一度に複数のチェックボックスをオンにすることができます。

— KyleFarris 2009

2

とにかく、おそらく次のようなものが必要です。

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

これは、ページで最初にチェックされたチェックボックスの値を取得し、それをテキストエリアに挿入しid='textarea'ます。

サンプルコードでは、フォームにチェックボックスを配置する必要があることに注意してください。

— ピムイェーガー
ソース

2

これは間違っていisます。ブール値を返します。ブール値にはvalメソッドがありません。

— 未定義

2

別の投稿からの回答を使用して同じことを達成するために使用しているはるかに簡単で短い方法は次のとおりです。

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

— Zeeshan
ソース

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