244

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>

がAjaxid="c_d"で更新された場合、以下の altCognito のコードは機能しません。良い解決策はありますか？

4

14 に答える 14

326

これが機能するものです（例を参照）：

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

于 2009-04-24T15:01:15.903 に答える
128

選択したすべてのチェックボックスの値をカンマ区切りの文字列で返すこともできます。これにより、パラメーターとして 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>
于 2011-05-24T20:42:42.300 に答える
66

あなたの質問はかなり漠然としていますが、これがあなたが必要としているものだと思います：

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

…その近道をすっかり忘れていました。;)

于 2009-04-24T14:51:19.950 に答える
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();
});
于 2010-06-11T10:11:47.707 に答える
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 関数はチェックされている場合にのみ値を返します。他のすべての要素については、チェックされたステータスに関係なく値が返されます。

于 2010-12-28T05:00:41.307 に答える
5

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

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

（map（）は配列を返します。これは、テキストエリアのテキストよりも便利だと思います）。

于 2012-04-04T13:48:17.500 に答える
3 
 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });
于 2011-03-04T07:03:25.527 に答える
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.
    }
  });
});
于 2009-04-24T15:10:50.233 に答える
2 
$("#t").text($("#cb").find(":checked").val())
于 2009-04-24T14:51:13.460 に答える
2

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

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

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

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

于 2009-04-24T14:52:18.687 に答える
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);
于 2014-11-17T19:13:27.250 に答える
0

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

$(":checkbox").click(function(){
  $("#id").text(this.value)
})
于 2009-04-24T14:55:03.843 に答える
0

私は同様の問題を抱えていましたが、これが上記の例を使用して解決した方法です。

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });
于 2013-11-05T20:00:44.030 に答える