รับช่องทำเครื่องหมายที่เลือกทั้งหมดในอาร์เรย์

ดังนั้นฉันมีช่องทำเครื่องหมายเหล่านี้:

<input type="checkbox" name="type" value="4" />
<input type="checkbox" name="type" value="3" />
<input type="checkbox" name="type" value="1" />
<input type="checkbox" name="type" value="5" />

และอื่น ๆ มีประมาณ 6 ของพวกเขาและถูกเขียนด้วยมือ (เช่นไม่ดึงจาก db) ดังนั้นพวกเขามีแนวโน้มที่จะยังคงเหมือนเดิมในขณะที่

คำถามของฉันคือฉันจะทำให้พวกมันทั้งหมดอยู่ในอาร์เรย์ (เป็นจาวาสคริปต์) ได้อย่างไรดังนั้นฉันสามารถใช้พวกมันในขณะที่ทำการ$.postร้องขอAJAX โดยใช้ Jquery

ความคิดใด ๆ

แก้ไข: ฉันต้องการให้เพิ่มกล่องกาเครื่องหมายที่เลือกไว้ในอาร์เรย์เท่านั้น

ฟอร์แมตแล้ว:

$("input:checkbox[name=type]:checked").each(function(){
    yourArray.push($(this).val());
});

หวังว่ามันจะทำงาน

var chk_arr =  document.getElementsByName("chkRights[]");
var chklength = chk_arr.length;             

for(k=0;k< chklength;k++)
{
    chk_arr[k].checked = false;
} 

เพียว JS

สำหรับผู้ที่ไม่ต้องการใช้ jQuery

var array = []
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')

for (var i = 0; i < checkboxes.length; i++) {
  array.push(checkboxes[i].value)
}

ฉันไม่ได้ทดสอบ แต่ควรใช้งานได้

<script type="text/javascript">
var selected = new Array();

$(document).ready(function() {

  $("input:checkbox[name=type]:checked").each(function() {
       selected.push($(this).val());
  });

});

</script>

สิ่งนี้ควรทำเคล็ดลับ:

$('input:checked');

ฉันไม่คิดว่าคุณมีองค์ประกอบอื่น ๆ ที่สามารถตรวจสอบได้ แต่ถ้าคุณทำคุณจะต้องทำให้เฉพาะเจาะจงมากขึ้น:

$('input:checkbox:checked');

$('input:checkbox').filter(':checked');

ใน MooTools 1.3 (ล่าสุด ณ เวลาที่เขียน):

var array = [];
$$("input[type=checkbox]:checked").each(function(i){
    array.push( i.value );
});

หากคุณต้องการใช้วานิลลา JS คุณสามารถทำเช่นเดียวกันกับ @ zahid-ullah แต่หลีกเลี่ยงการวนซ้ำ:

  var values = [].filter.call(document.getElementsByName('fruits[]'), function(c) {
    return c.checked;
  }).map(function(c) {
    return c.value;
  });

รหัสเดียวกันใน ES6 ดูดีกว่า:

var values = [].filter.call(document.getElementsByName('fruits[]'), (c) => c.checked).map(c => c.value);

window.serialize = function serialize() {
  var values = [].filter.call(document.getElementsByName('fruits[]'), function(c) {
    return c.checked;
  }).map(function(c) {
    return c.value;
  });
  document.getElementById('serialized').innerText = JSON.stringify(values);
}

label {
  display: block;
}

<label>
  <input type="checkbox" name="fruits[]" value="banana">Banana
</label>
<label>
  <input type="checkbox" name="fruits[]" value="apple">Apple
</label>
<label>
  <input type="checkbox" name="fruits[]" value="peach">Peach
</label>
<label>
  <input type="checkbox" name="fruits[]" value="orange">Orange
</label>
<label>
  <input type="checkbox" name="fruits[]" value="strawberry">Strawberry
</label>
<button onclick="serialize()">Serialize
</button>
<div id="serialized">
</div>

ใน Javascript มันจะเป็นเช่นนี้(ลิงก์สาธิต) :

// get selected checkboxes
function getSelectedChbox(frm) {
  var selchbox = [];// array that will store the value of selected checkboxes
  // gets all the input tags in frm, and their number
  var inpfields = frm.getElementsByTagName('input');
  var nr_inpfields = inpfields.length;
  // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
  for(var i=0; i<nr_inpfields; i++) {
    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
  }
  return selchbox;
}   

รุ่น ES6:

const values = Array
  .from(document.querySelectorAll('input[type="checkbox"]'))
  .filter((checkbox) => checkbox.checked)
  .map((checkbox) => checkbox.value);

function getCheckedValues() {
  return Array.from(document.querySelectorAll('input[type="checkbox"]'))
  .filter((checkbox) => checkbox.checked)
  .map((checkbox) => checkbox.value);
}

const resultEl = document.getElementById('result');

document.getElementById('showResult').addEventListener('click', () => {
  resultEl.innerHTML = getCheckedValues();
});

<input type="checkbox" name="type" value="1" />1
<input type="checkbox" name="type" value="2" />2
<input type="checkbox" name="type" value="3" />3
<input type="checkbox" name="type" value="4" />4
<input type="checkbox" name="type" value="5" />5

<br><br>
<button id="showResult">Show checked values</button>
<br><br>
<div id="result"></div>

JavaScript ที่แท้จริงโดยไม่จำเป็นต้องมีตัวแปรชั่วคราว:

Array.from(document.querySelectorAll("input[type=checkbox][name=type]:checked")).map(e => e.value)

var checkedValues = $('input:checkbox.vdrSelected:checked').map(function () {
        return this.value;
    }).get();

ในการตรวจสอบเพิ่มค่าสำหรับช่องทำเครื่องหมายและในการ dechecking ลบค่า

$('#myDiv').change(function() {
  var values = 0.00;
  {
    $('#myDiv :checked').each(function() {
      //if(values.indexOf($(this).val()) === -1){
      values=values+parseFloat(($(this).val()));
      // }
    });
    console.log( parseFloat(values));
  }
});

<div id="myDiv">
  <input type="checkbox" name="type" value="4.00" />
  <input type="checkbox" name="type" value="3.75" />
  <input type="checkbox" name="type" value="1.25" />
  <input type="checkbox" name="type" value="5.50" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

อีกวิธีในการทำเช่นนี้กับ vanilla JS ในเบราว์เซอร์สมัยใหม่ (ไม่รองรับ IE และน่าเศร้าที่ไม่มีการสนับสนุน iOS Safari ในขณะที่เขียน) อยู่กับFormData.getAll () :

var formdata   = new FormData(document.getElementById("myform"));
var allchecked = formdata.getAll("type"); // "type" is the input name in the question

// allchecked is ["1","3","4","5"]  -- if indeed all are checked

ใช้ Jquery

คุณจะต้องเพิ่มคลาสให้กับทุกอินพุตฉันมีการเพิ่ม "source" คลาสคุณสามารถเปลี่ยนได้แน่นอน

<input class="source" type="checkbox" name="type" value="4" />
<input class="source" type="checkbox" name="type" value="3" />
<input class="source" type="checkbox" name="type" value="1" />
<input class="source" type="checkbox" name="type" value="5" />

<script type="text/javascript">
$(document).ready(function() {
    var selected_value = []; // initialize empty array 
    $(".source:checked").each(function(){
        selected_value.push($(this).val());
    });
    console.log(selected_value); //Press F12 to see all selected values
});
</script>

ใช้สิ่งนี้:

var arr = $('input:checkbox:checked').map(function () {
  return this.value;
}).get();

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

$('#myDiv').change(function() {
  var values = [];
  {
    $('#myDiv :checked').each(function() {
      //if(values.indexOf($(this).val()) === -1){
      values.push($(this).val());
      // }
    });
    console.log(values);
  }
});

<div id="myDiv">
  <input type="checkbox" name="type" value="4" />
  <input type="checkbox" name="type" value="3" />
  <input type="checkbox" name="type" value="1" />
  <input type="checkbox" name="type" value="5" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

คุณสามารถลองสิ่งนี้:

$('input[type="checkbox"]').change(function(){
       var checkedValue = $('input:checkbox:checked').map(function(){
                return this.value;
            }).get();         
            alert(checkedValue);   //display selected checkbox value     
 })

ที่นี่

$('input[type="checkbox"]').change(function() call when any checkbox checked or unchecked, after this
$('input:checkbox:checked').map(function()  looping on all checkbox,

นี่คือรหัสของฉันสำหรับปัญหาเดียวกันที่บางคนสามารถลองได้ jQuery

<script>
$(document).ready(function(){`
$(".check11").change(function(){
var favorite1 = [];        
$.each($("input[name='check1']:checked"), function(){                    
favorite1.push($(this).val());
document.getElementById("countch1").innerHTML=favorite1;
});
});
});
</script>

var array = []
    $("input:checkbox[name=type]:checked").each(function(){
        array.push($(this).val());
    });