รับค่าของช่องทำเครื่องหมายที่เลือก?

ดังนั้นฉันมีรหัสที่มีลักษณะเช่นนี้:

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

ฉันแค่ต้องการจาวาสคริปต์เพื่อรับค่าของสิ่งที่ช่องทำเครื่องหมายที่มีการตรวจสอบในปัจจุบัน

แก้ไข : หากต้องการเพิ่มจะมีช่องทำเครื่องหมายเพียงช่องเดียวเท่านั้น

สำหรับเบราว์เซอร์สมัยใหม่ :

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

โดยใช้jQuery :

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

จาวาสคริปต์เพียวโดยไม่ต้องjQuery :

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

ข้อสังเกตข้างต้นไม่ได้ผลสำหรับฉัน แต่ใช้สิ่งนี้:

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

การเข้ารหัสที่มีความสุข

ฉันใช้สิ่งนี้ในรหัสของฉันลองสิ่งนี้

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

หากช่องทำเครื่องหมายถูกทำเครื่องหมายxจะเป็นจริงมิฉะนั้นจะเป็นเท็จ

ในจาวาสคริปต์ธรรมดา:

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

สิ่งนี้ไม่ได้ตอบคำถามโดยตรง แต่อาจช่วยผู้เข้าชมในอนาคต

หากคุณต้องการให้ตัวแปรเป็นสถานะปัจจุบันของช่องทำเครื่องหมาย (แทนที่จะต้องทำการตรวจสอบสถานะของมันเสมอ) คุณสามารถแก้ไข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})

ใช้สิ่งนี้:

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

สิ่งนี้จะถือว่าช่องทำเครื่องหมายเพื่อตรวจสอบมีคลาส "messageCheckbox" มิฉะนั้นคุณจะต้องทำการตรวจสอบว่าอินพุตเป็นประเภทช่องทำเครื่องหมาย ฯลฯ

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

หากคุณกำลังใช้ความหมาย UI ตอบสนอง , dataจะถูกส่งเป็นพารามิเตอร์ที่สองกับonChangeเหตุการณ์

คุณสามารถเข้าถึงcheckedคุณสมบัติดังต่อไปนี้:

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

ไม่มีข้อใดถูกใช้งานได้สำหรับฉันโดยไม่ทิ้งข้อผิดพลาดในคอนโซลเมื่อไม่มีการทำเครื่องหมายในกล่องดังนั้นฉันจึงทำบางสิ่งตามบรรทัดเหล่านี้แทน (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>

ในโครงการของฉันฉันมักจะใช้ตัวอย่างนี้:

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

และมันทำงานได้ดี ด้วยความเคารพ