web-dev-qa-db-ja.com

jQueryのチェックボックス値を取得する

JQueryでチェックボックスの値を取得する方法

jqueryhtmlformscheckbox
447
maztt

Value属性の値を取得するには、次のようにします。

$("input[type='checkbox']").val();

classまたはidを設定している場合は、次のことができます。

$('#check_id').val();
$('.check_class').val();

ただし、これはチェックされているかどうかにかかわらず、同じの値を返します。送信されたフォームの動作とは異なるため、混乱する可能性があります。

チェックされているかどうかを確認するには、次のようにします。

if ($('#check_id').is(":checked"))
{
  // it is checked
}
873
Sarfraz

これら2つの方法はうまくいきます：

  • $('#checkbox').prop('checked')
  • $('#checkbox').is(':checked')（ありがとう @mgsloan）
$('#test').click(function() {
    alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
    alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />
188
Alain Tiemblo

この小さな解決策を試してください。

$("#some_id").attr("checked") ? 1 : 0;

または

$("#some_id").attr("checked") || 0;
55
RDK

チェックボックスの値を取得する唯一の正しい方法は次のとおりです。

if ( elem.checked ) 
if ( $( elem ).prop( "checked" ) ) 
if ( $( elem ).is( ":checked" ) )

jQueryのWebサイトの公式文書で説明されているように。他のメソッドはチェックボックスのプロパティとは何の関係もありません。それらは属性をチェックしています。要するに、

  • 要素があり、それがチェックボックスであることがわかっている場合は、単純にそのプロパティを読むことができ、そのためにjQueryは必要ありません（つまりelem.checked）、またはjQueryに頼る場合は$(elem).prop("checked")を使用できます。
  • 要素が最初にロードされたときの値（つまりデフォルト値）を知る（または比較する）必要がある場合は、それを行う正しい方法は$(elem).is(":checked")です。

答えは誤解を招くようなものです、自分自身の下を確認してください。

http://api.jquery.com/prop/

28
Reza

物事を明確にするためだけに：

$('#checkbox_ID').is(":checked")

'true'または 'false'を返します

14
Greg A
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
11
Nalan Madheswaran
jQuery(".checkboxClass").click(function(){
        var selectedCountry = new Array();
        var n = jQuery(".checkboxClass:checked").length;
        if (n > 0){
            jQuery(".checkboxClass:checked").each(function(){
                selectedCountry.Push($(this).val());
            });
        }
        alert(selectedCountry);
    });
10
Jaskaran singh Rajal

シンプルだが効果的で、チェックボックスが見つかることを知っていると仮定します。

$("#some_id")[0].checked;

true/falseを与えます

7
Kevin Shea

この質問がjQueryソリューションを求めているという事実にもかかわらず、誰もそれを言及していないので、これは純粋なJavaScriptの答えです。

JQueryがない場合

単に要素を選択して checkedプロパティ にアクセスするだけです（これはブール値を返します）。

var checkbox = document.querySelector('input[type="checkbox"]');

alert(checkbox.checked);
<input type="checkbox"/>

これはchangeイベントを聞いた簡単な例です：

var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
    alert(this.checked);
});
<input type="checkbox"/>

チェックされた要素を選択するには、 :checked擬似クラス （input[type="checkbox"]:checked）を使います。

これは、チェックされたinput要素を反復処理し、チェックされた要素の名前のマップされた配列を返す例です。

ここでの例

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);
<div class="parent">
    <input type="checkbox" name="name1" />
    <input type="checkbox" name="name2" />
    <input type="checkbox" name="name3" checked="checked" />
    <input type="checkbox" name="name4" checked="checked" />
    <input type="checkbox" name="name5" />
</div>
6
Josh Crozier
//By each()
var testval = [];
 $('.hobbies_class:checked').each(function() {
   testval.Push($(this).val());
 });


//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");

 //HTML Code

 <input type="checkbox" value="cricket" name="hobbies[]"  class="hobbies_class">Cricket 
  <input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey

例
 デモ

6
Kamal

これはすべてのチェックされたチェックボックスの値を配列として取得する方法です：

var values = (function() {
                var a = [];
                $(".checkboxes:checked").each(function() {
                    a.Push(this.value);
                });
                return a;
            })()
2
Faraz Kelhini

次のコードを使用してください。

$('input[name^=CheckBoxInput]').val();
1
Myint Thu Lwin
$('.class[value=3]').prop('checked', true);
1
Jacksonit.org
<script type="text/javascript">
$(document).ready(function(){
    $('.laravel').click(function(){
        var val = $(this).is(":checked");
        $('#category').submit();
    });
});

<form action="{{route('directory')}}" method="post" id="category">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input name="category" value="{{$name->id}}"  class="laravel" type="checkbox">{{$name->name}}
                      </form>
0
Kuldeep Mishra

現在の2018年現在、APIが何年にもわたって変化しているため、注意が必要です。 removeAttrはもう使われていません。

Jqueryチェックボックスをオンまたはオフにします。

悪い、もう動かない。

   $('#add_user_certificate_checkbox').removeAttr("checked");

   $('#add_user_certificate_checkbox').attr("checked","checked");

代わりにあなたがすべきです：

      $('#add_user_certificate_checkbox').prop('checked', true);
      $('#add_user_certificate_checkbox').prop('checked', false);
0
hoogw