JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body>
    <fieldset id="ophealth_safety">
      <div>
        <input type="checkbox" id="opladdert" name="health_safety" value="Triple ladders">
        <label class="checking" for="opladder">Triple Ladders</label>
      </div>
      <div>
        <input type="checkbox" id="opgardens" name="health_safety" value="Access private gardens required">
        <label class="checking" for="opgardens">Access private gardens required</label>
      </div>
      <div>
        <input type="checkbox" id="opskylight" name="health_safety" value="Skylight">
        <label class="checking" for="opskylight">Skylight</label>
      </div>
      <div>
        <input type="checkbox" id="oploft" name="health_safety" value="Access Loft">
        <label class="checking" for="oploft">Access Loft</label>
      </div>
      <div>
        <input type="checkbox" id="oproof" name="health_safety" value="Access to roof">
        <label class="checking" for="oproof">Access to roof</label>
      </div>
      <div>
        <input type="checkbox" id="opother" name="health_safety" value="Other">
        <label class="checking" for="opother">Other</label>
        <input type="text" id="opotherdesc" name="other" pattern="[A-Za-z].{4,}" title="The text should include at least 4 letters" placeholder="Please specify">
      </div>
    </fieldset>
                                        
    <button onclick="doIt()" value="Do It!">
      Do It!
    </button>
  </body>
</html>

JavaScript

function doIt() {
  const values = Object.values(document.querySelectorAll('input[name="health_safety"]:checked')).map(input => input.value);
  const result = values.join(', ') + (values[values.length - 1] === 'Other' ? ' - ' + document.getElementById('opotherdesc').value : '');
  alert(result);
}