0

im trying to get my checked input value from my ajax but it only return my first tick...here is my code 

function getBranchAjax(cuid, stid) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-Token': $('meta[name=csrf-token]').attr('content')
        }
    });
    $.ajax({
        url: "{{ route('reporting.getBranchAjax',['cuid','stid']) }}",
        method: 'GET',
        data: { cuid: cuid, stid: stid },
        dataType: 'json',
        success: function (data) {

            console.log(data);
            console.log(data.branch.length);


            //remove all option except the first option the append with new option
            //remove all option except the first option the append with new option
            for (var x = 0; x < data.branch.length; x++) {
                //console.log(data.branch[x].cb_branch_Name);
                $('#brRecord').append(`<tr><td style='width: 110px; text-align: left;'>${data.branch[x].cb_branchcode}
    </td><td style='width: 600px; text-align: left;'>${data.branch[x].cb_branch_Name}</td>
     <td style='width: 20px;'> 
    <input type="checkbox" class="ss" name="ss" id="ss" value="${data.branch[x].cb_branch_Name}" /></td><td>

                                    </td></tr>`);

            }


        },
        fail: function (xhr, textStatus, errorThrown) {
            alert('request failed');
        }
    })
}

Get value by class name which is only return value of my first tick

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

console.log(checkedValue); // only return a value of my first tick

I expect to get more value based on my input tick value

Calos
  • 1,783
  • 19
  • 28
Adam Fiqrie Putra
  • 219
  • 2
  • 15

2 Answers2

1

Multiple values would need to be held in an Array (or similar).

For example: 

var checkedValues = Array.from(document.getElementsByClassName('ss')).filter(el => el.checked).map(el => el.value);

console.log(checkedValues);

Or, since the question is tagged jQuery:

var checkedValues = jQuery('.ss:checked').get().map(el => el.value);

console.log(checkedValues);

With the values in an array, you can then do whatever you want with them, eg display them or perform some transform on them.

Roamer-1888
  • 19,138
  • 5
  • 33
  • 44
0

It is because you add a break in your for loop.

Removing it will solve your problem.

for(var i=0; inputElements[i]; ++i){
        if(inputElements[i].checked){
            checkedValue = inputElements[i].value;
        }
    }

If you want to get all the latest clicked checkbox you can use onChange

function checkedInput() 
{
 cosnt checkedValue = [];
 for(var i=0; inputElements[i]; ++i){
        if(inputElements[i].checked){
            checkedValue.push(inputElements[i].value);
        }
    }
  return checkedValue ;

}

$(document).on('change', '#ss', function () {
 console.log(checkedInput());
})
Poldo
  • 1,924
  • 1
  • 11
  • 27