web-dev-qa-db-ja.com

チェックボックスの値を取得しますか？

だから私はこのように見えるコードを持っています：

<input class="messageCheckbox" type="checkbox" value="3" name="mailId[]">
<input class="messageCheckbox" type="checkbox" value="1" name="mailId[]">

現在チェックされているチェックボックスの値を取得するにはJavascriptが必要です。

_ edit _ ：追加すると、チェックボックスは1つだけになります。

javascriptcheckbox
142
Mandatory Programmer

最近のブラウザの場合 ：

var checkedValue = document.querySelector('.messageCheckbox:checked').value;

jQueryを使用する ：

var checkedValue = $('.messageCheckbox:checked').val();

jQueryのない純粋なJavaScript ：

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}
215
Engineer

上記のどれも私のために働きませんでしたが、単にこれを使います：

document.querySelector('.messageCheckbox').checked;

ハッピーコーディング.

217
JanBorup

私は自分のコードでこれを使用しています。これを試してください

var x=$("#checkbox").is(":checked");

チェックボックスがチェックされている場合、xはtrueになり、そうでなければfalseになります。

101
user1683014

プレーンなJavaScriptで：

function test() {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        alert(i + (cboxes[i].checked?' checked ':' unchecked ') + cboxes[i].value);
    }
}

function selectOnlyOne(current_clicked) {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        cboxes[i].checked = (cboxes[i] == current);
    }
}
10
Stano

これは質問に直接答えているわけではありませんが、将来の訪問者を助けるかもしれません。

変数を常にチェックボックスの現在の状態にしたい場合（その状態をチェックし続けるのではなく）、その変数を設定するようにonchangeイベントを変更できます。

これはHTMLで行うことができます。

<input class='messageCheckbox' type='checkbox' onchange='some_var=this.checked;'>

またはJavaScriptで

cb = document.getElementsByClassName('messageCheckbox')[0]
cb.addEventListener('change', function(){some_var = this.checked})
4
Joe Iddon
$(document).ready(function() {
  var ckbox = $("input[name='ips']");
  var chkId = '';
  $('input').on('click', function() {
    
    if (ckbox.is(':checked')) {
      $("input[name='ips']:checked").each ( function() {
                        chkId = $(this).val() + ",";
        chkId = chkId.slice(0, -1);
          });
       
       alert ( $(this).val() ); // return all values of checkboxes checked
       alert(chkId); // return value of checkbox checked
    }     
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="ips" value="12520">
<input type="checkbox" name="ips" value="12521">
<input type="checkbox" name="ips" value="12522">
4
Marinha do Nascimento

これを使って：

alert($(".messageCheckbox").is(":checked").val())

これはチェックするチェックボックスのクラスが "messageCheckbox"であることを前提としています。それ以外の場合は、入力がチェックボックスタイプなどであるかどうかをチェックする必要があります。

2
jackJoe
<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="3" name="mailId[]">

<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="1" name="mailId[]">

function getValue(value){
    alert(value);
}
0
Alien

Semantic UI React を使用している場合、dataが2番目のパラメーターとしてonChangeイベントに渡されます。

したがって、次のようにcheckedプロパティにアクセスできます。

<Checkbox label="Conference" onChange={(e, d) => console.log(d.checked)} />
0
Dave Clark