JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="checkbox">
  <label for="servicelist1" >Service 1: </label>
  <input class="list" type="checkbox" name="servicelistcheckbox[]" id="servicelist1" value="Service1">
</div>
<div class="checkbox">
  <label for="servicelist2" >Service 2: </label>
  <input class="list" type="checkbox" name="servicelistcheckbox[]" id="servicelist2" value="Service2">
</div>
<div class="checkbox">
  <label for="servicelist3" >Service 3: </label>
  <input class="list" type="checkbox" name="servicelistcheckbox[]" id="servicelist3" value="Service3">
</div>
<button>
Check
</button>

JavaScript

$('button').on('click', () => {
	let values = [];
  $(".checkbox").each(function() {
		const label = $(this).find('label');
    const checkbox = $(this).find('input[type="checkbox"]')
    
    if (checkbox.is(":checked")) 
    	values.push(label.text(), checkbox.val())
  });
  
  console.log(values);
});