How To Get A Checkbox Value In Javascript

I need to get a list of the checkbox values when checked and passed them to an input. However, my value is duplicated when I click checkall first. Please help me. Thanks. My Code &

Solution 1:

You can try this:

var idsArr = [];
var displayField = $('input[name=selectedCB]');
var checkboxes = Array.from($(".tycheck input[type=checkbox]"));

functiontoggle(source) {
    var values = checkboxes.map(x => {
      x.checked = source.checked;

      return source.checked ? x.value : '';
    }).join(source.checked ? ',' : '');
      
    displayField.val(values);
}

functionprintChecked() {
    var values = checkboxes.filter(x => x.checked).map(x => x.value);

    displayField.val(values);
}

$.each(checkboxes, function () {
    $(this).change(printChecked);
})

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><inputid="listvalue"name="selectedCB"><inputtype="checkbox"onclick="toggle(this)"name="checkedAll"id="checkedAll" /><divclass="tycheck"><inputtype="checkbox"name="checkAll"value="2"class="checkSingle" /><inputtype="checkbox"name="checkAll"value="1"class="checkSingle" /><inputtype="checkbox"name="checkAll"value="3"class="checkSingle" /></div>

Solution 2:

You could do like this

1. Use any one of the type javascript selector or JQuery selector
2. Not necessary to use Array or forloops .All function already there in jquery concept .For that we used Jquery.map
3. For below i have simply create one change function call.checker
4. Then call that function on checkbox change event in both checkall and normal check event

$(document).ready(function() {
  const elem = $('.tycheck input[type=checkbox]'); //select the checkbox elem
  elem.on('change', function() {
    checker(elem) //get the checked value list
  })
  $('#checkedAll').on('change', function() {
    elem.prop('checked', $(this).is(':checked')) //for select all simply compare with checkall buttonchecker(elem)
  })
})


functionchecker(elem) {
  let res = elem.map((i, item) => {
    if ($(item).is(':checked')) {
      return $(item).val()
    }
  }).get()
  $('#listvalue').val(res.toString())
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><inputid="listvalue"name="selectedCB"><inputtype="checkbox"name="checkedAll"id="checkedAll" /><divclass="tycheck"><inputtype="checkbox"name="checkAll"value="2"class="checkSingle" /><inputtype="checkbox"name="checkAll"value="1"class="checkSingle" /><inputtype="checkbox"name="checkAll"value="3"class="checkSingle" /></div>