배열에서 선택한 모든 확인란을 가져 오기

따라서 다음 확인란이 있습니다.

<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에서 가져 오지 않음) 잠시 동안 동일하게 유지 될 수 있습니다.

내 질문은 배열 (자바 스크립트)으로 모두 가져올 수 있으므로 $.postJquery를 사용하여 AJAX 요청 을하는 동안 사용할 수 있습니다 .

이견있는 사람?

편집 : 선택한 확인란 만 배열에 추가하고 싶습니다.

형식 :

$("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에서는 다음과 같습니다 (Demo Link) :

// 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();

확인할 때 확인란의 값을 추가하고 선택을 취소하면 값을 뺍니다.

$('#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>

최신 브라우저에서 바닐라 JS를 사용 하여이 작업을 수행하는 또 다른 방법은 IE를 지원하지 않고 슬프게도 iOS Safari를 지원하지 않는 FormForm.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 사용

모든 입력에 클래스를 추가하기 만하면됩니다. 클래스 "소스"를 추가하면 물론 변경할 수 있습니다.

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

버튼 클릭 또는 삽입을 실행하는 데 무언가를 사용하는 경우 이미 배열에있는 값을 추가하지 못하게하려면 주석 처리 된 if 블록을 사용하십시오

$('#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());
    });