獲取選中復選框的值？

Question

所以我有這樣的代碼：

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

我只需要 Javascript 來獲取當前選中的任何復選框的值。

編輯：要添加，將只有一個復選框。

Answer 1

以上都不適合我，只是簡單地使用這個：

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

快樂編碼。

Answer 2

對於現代瀏覽器：

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;
      }
}

Answer 3

我在我的代碼中使用這個。試試這個

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

如果復選框被選中， x將為真，否則為假。

Answer 4

在普通的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);
    }
}

Answer 5

這並不能直接回答問題，但可能對未來的訪問者有所幫助。

---

如果你想讓一個變量始終是復選框的當前狀態（而不是一直檢查它的狀態），你可以修改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})

Answer 6

 $(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">

Answer 7

用這個：

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

這假設要檢查的復選框具有“messageCheckbox”類，否則您必須檢查輸入是否為復選框類型等。

Answer 8

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

Answer 9

當未選中該框時，上述任何一項都不對我有用，而不會在控制台中引發錯誤，因此我按照這些方式做了一些事情（onclick 和復選框功能僅用於演示目的，在我的用例中，它是更大的表單提交功能）：

 function checkbox() { var checked = false; if (document.querySelector('#opt1:checked')) { checked = true; } document.getElementById('msg').innerText = checked; }

 <input type="checkbox" onclick="checkbox()" id="opt1"> <span id="msg">Click The Box</span>

Answer 10

如果您使用Semantic UI React ， data將作為第二個參數傳遞給onChange事件。

因此，您可以按如下方式訪問已checked屬性：

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

Answer 11

如果您想使用 jQuery 獲取所有復選框的值，這可能對您有所幫助。 這將解析列表，並根據所需的結果，您可以執行其他代碼。 順便說一句，為此，不需要用括號 [] 命名輸入。 我離開了他們。

  $(document).on("change", ".messageCheckbox", function(evnt){
    var data = $(".messageCheckbox");
    data.each(function(){
      console.log(this.defaultValue, this.checked);
      // Do something... 
    });
  }); /* END LISTENER messageCheckbox */

Answer 12

純 javascript 和現代瀏覽器

// for boolean
document.querySelector(`#isDebugMode`).checked

// checked means specific values
document.querySelector(`#size:checked`)?.value ?? defaultSize

例子

 <form> <input type="checkbox" id="isDebugMode"><br> <input type="checkbox" value="3" id="size"><br> <input type="submit"> </form> <script> document.querySelector(`form`).onsubmit = () => { const isDebugMode = document.querySelector(`#isDebugMode`).checked const defaultSize = "10" const size = document.querySelector(`#size:checked`)?.value ?? defaultSize // 👇 for defaultSize is undefined or null // const size = document.querySelector(`#size:checked`)?.value console.log({isDebugMode, size}) return false } </script>

• Optional_chaining (?.)

Answer 13

驚訝地發現這里沒有有效的 vanilla JavaScript 解決方案（當您遵循最佳實踐並對每個 HTML 元素使用不同的 ID 時，投票最高的答案不起作用）。 但是，這對我有用：

Array.prototype.slice.call(document.querySelectorAll("[name='mailId']:checked"),0).map(function(v,i,a) { 
      return v.value; 
  });

Answer 14

您可以通過jQuery或JavaScript使用以下方法來檢查checkbox是否被單擊。

$('.messageCheckbox').is(":checked"); // jQuery
document.getElementById(".messageCheckbox").checked //JavaScript

要獲取在 jQuery 中檢查的值：

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

Answer 15

在我的項目中，我通常使用這個片段：

var type[];
$("input[name='messageCheckbox']:checked").each(function (i) {
                type[i] = $(this).val();
            });

它運作良好。