如果选中复选框，则获取数组中的产品名称和价格

Question

如果选中复选框，我想获取数组中的服务名称及其价格。enter image description here 图片也如下：获取所选项目的值（即服务名称及其数组中的价格）。请告诉我如何获得。

$(document).on('click', '.completed_request', function(){
            var completed_request_id = $(this).attr('request_id');
            var prescription = $(this).parent().parent().find('td').eq(2).text();
            console.log((prescription));
            var arr_val = prescription.split(',');
            if(arr_val != null){
                var lihtml =  "";
                arr_val.forEach(val => {
                  //lihtml+='<li>'+val+'</li>';
                  lihtml+='<li><div class="form-check form-check-inline">\n'+
                      '<input class="form-check-input inlineCheckbox1 checkedId"  type="checkbox" value="option1">\n'+
                    '<label class="form-check-label add" for="inlineCheckbox1" id="">'+val+'</label>\n'+
                  '</div>';
                  lihtml+='<input type="text" class="checkedId cal_total checked" id="file_id">\n</li>';
                });
               // console.log(lihtml);
                $("#val_html").html(lihtml);

            }
            bootbox.confirm("Do you want to complete this request?", function (result) {
                if (result == true) {
                    $('#prescription_names').text(prescription);
                    $('#completedModalId #request_id').val(completed_request_id);
                    $('#completedModalId').modal('show');
                     $('#total_amount').val('');
                }

            });
        });
/*
* to selected item names and price
*/
 $(document).on("click", ".checkedId", function() {
            if ($('.checkedId').prop('checked') == true) {
             //console.log($(this).next('label').text());
             var selectedItemsNames = $(this).next('label').text();
             //var row = $('.cal_total').closestval();
             //$('.cal_total').addClass("checked").removeClass("unchecked");
             var checks = [];
             var ss = $('.cal_total').each(function(index, item){
                checks.push( item );

             });
             console.log(row);
             console.log(selectedItemsNames);
            }
        });

Answer 1

每当用户单击复选框时，您都可以使用 each 循环遍历所有 checked 复选框并向数组添加新值，即：names , prices.

演示代码 :

$(document).on("click", ".checkedId", function() {
  var prices = [];
  var names = [];
  //loop through lis with checked checkboxes
  $("ul li ").find(".checkedId:checked").each(function(index, item) {
    //get value of price
    prices.push($(this).closest('li').find(".cal_total").val());
    //get value of names and push in array
    names.push($(this).closest('li').find('label').text());
  });

  console.log(prices)
  console.log(names)


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="form-check form-check-inline">
      <input class="form-check-input inlineCheckbox1 checkedId" type="checkbox" value="option1">
      <label class="form-check-label add" for="inlineCheckbox1" id="">something</label>
    </div>
    <input type="text" class="checkedId cal_total checked" id="file_id" value="25"></li>
  <li>
    <div class="form-check form-check-inline">
      <input class="form-check-input inlineCheckbox1 checkedId" type="checkbox" value="option1">
      <label class="form-check-label add" for="inlineCheckbox1" id="">something2</label>
    </div>
    <input type="text" class="checkedId cal_total checked" id="file_id" value="27"></li>
</ul>

如果选中复选框，则获取数组中的产品名称和价格

if check box is checked then get product name and price in a array

html

javascript

jquery

jquery-ui

laravel-5