Получение всех выбранных флажков в массиве
Так что у меня есть эти флажки:
<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 из них и закодированы вручную (т. е. не извлекаются из БД), поэтому они, вероятно, останутся прежними на некоторое время.
мой вопрос в том, как я могу получить их все в массиве (в javascript), поэтому я могу использовать их при создании AJAX $.post
запрос с помощью Jquery.
какие мысли?
Edit: я бы только хотел, чтобы выбранные флажки были добавлены в массив
16 ответов:
формат :
$("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; }
Я не тестировал его, но он должен работать
<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
для тех, кто не хочет использовать jQuery
var array = [] var checkboxes = document.querySelectorAll('input[type=checkbox]:checked') for (var i = 0; i < checkboxes.length; i++) { array.push(checkboxes[i].value) }
в 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; }
если вы хотите использовать vanilla 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>
var checkedValues = $('input:checkbox.vdrSelected:checked').map(function () { return this.value; }).get();
версия 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>
С Помощью Jquery
вам нужно только добавить класс к каждому входу, у меня есть добавить класс "Источник" вы можете изменить его, конечно
<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 = 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>
используйте блок commented if, чтобы предотвратить добавление значений, которые уже есть в массиве, если вы используете кнопку click или что-то для запуска вставки
$('#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>