neno-tech/code.gs

## code.gs
var ss = SpreadsheetApp.openById('xxx')

function doGet(e) {
  return HtmlService.createTemplateFromFile("index").evaluate()
    .setTitle("WebApp Form Toggle-Show-Hide Password")
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function saveData(obj) {
  let ws = ss.getSheetByName('xxx');
  ws.appendRow([new Date(), obj.input1, obj.checked ])
  return true;
}

function setOptions(){
  let data = ss.getSheetByName('xxx').getRange('A2:A').getValues()
    .filter(d => d[0] !== "")
  let options = data.map(d => {
    return '<label class="mt-2" for="' + d[0] + '">'
      + '<input type="checkbox" id="' + d[0] + '" class="multi" value="' + d[0]+'">'
      + ' ' + d[0] + ''
      + '</label><br>'
  }).join("")
  return options;
}

## css.html
    body{
      font-family:Prompt;
     background: #eee;
   }

   .frame{
      box-shadow: 10px 10px 15px rgb(193,182,182), -6px -6px 15px #eee;
      padding: 20px;
      max-width: 480px;
      margin: 40px auto;
      margin-top: 50px;
      border-radius: 7px;
      background: white;
   }

    button {
      text-transform: uppercase;
      transition: transform 80ms ease-in;
      border-radius: 7px;
    }

    button:active {
        transform: scale(0.95);
        color: white
    }

    .btn.focus, .btn:focus {
        outline: 0;
        box-shadow: none!important;
        color: white;
    }

    .btn-info:hover {
      background-color: gold;
      color: white;
      border-color: gold;
    }

    .btn-info {color: white;}

    .box {
        border: 1px solid rgba(0,0,0,0.2);
        padding: 1.5rem;
        margin-left:10px;
        margin-right:10px;
        border-radius: 13px;
        margin: auto;
        width: 100%;
    }

    .inp {
        border:none;
        border-bottom: 1px solid rgba(0,0,0,0.2);
        border-radius: 0px;
        padding: 5px 10px;
        outline: none;
    }

    [placeholder]:focus::-webkit-input-placeholder {
        transition: text-indent 0.4s 0.4s ease;
        text-indent: -100%;
        opacity: 1;
    }

     .inp.focus, .inp:focus {
        outline: 0;
        box-shadow: none!important;
        /* color: green; */
        border-bottom: 1px solid rgba(0,0,0,0.2);
    }


## index.html
<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row frame">

      <h5 class="mt-4 text-center">เว็บแอป</h5>
      <h6 class="mb-4 text-center">การสร้าง checkbox ด้วยสคริปต์</h6>

      <div class="form-group mb-4 box">
        <input type="text" class="form-control inp mb-3" id="input1" placeholder="ชื่อ สกุล" autocomplete="off">
      </div>

      <div class="form-group mb-4 box">
        <span>โปรดเลือกรายการ</span><br>
        <?!= setOptions() ?>
      </div>

      <div class="form-group mt-4 mb-4 text-center">
        <button type="button" class="btn btn-primary" onclick="whenButtonClicked()">บันทึกข้อมูล</button>
      </div>

    </div>
  </div>
  <script>
    function whenButtonClicked(){
    event.preventDefault()
    let input1 = document.getElementById('input1');
    let checked;
    let temp = document.querySelectorAll('.multi:checked');
    if(temp != null){
    let checkedvalues = Array.prototype.map.call(temp, function(el){ return el.value })
      checked = checkedvalues.join(",")
    }else{
      checked = null
    }
    let objData = {input1: input1.value, checked: checked}

    google.script.run.withSuccessHandler(()=>{
      input1.value = ''
      document.querySelectorAll('.multi').forEach(function(el) { el.checked = false; } )
    }).saveData(objData)
  }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"
    integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"
    integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous">
  </script>
</body>
</html>
	var ss = SpreadsheetApp.openById('xxx')

	function doGet(e) {
	return HtmlService.createTemplateFromFile("index").evaluate()
	.setTitle("WebApp Form Toggle-Show-Hide Password")
	.addMetaTag('viewport', 'width=device-width, initial-scale=1')
	.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
	}

	function saveData(obj) {
	let ws = ss.getSheetByName('xxx');
	ws.appendRow([new Date(), obj.input1, obj.checked ])
	return true;
	}

	function setOptions(){
	let data = ss.getSheetByName('xxx').getRange('A2:A').getValues()
	.filter(d => d[0] !== "")
	let options = data.map(d => {
	return '<label class="mt-2" for="' + d[0] + '">'
	+ '<input type="checkbox" id="' + d[0] + '" class="multi" value="' + d[0]+'">'
	+ ' ' + d[0] + ''
	+ '</label><br>'
	}).join("")
	return options;
	}
	body{
	font-family:Prompt;
	background: #eee;
	}

	.frame{
	box-shadow: 10px 10px 15px rgb(193,182,182), -6px -6px 15px #eee;
	padding: 20px;
	max-width: 480px;
	margin: 40px auto;
	margin-top: 50px;
	border-radius: 7px;
	background: white;
	}

	button {
	text-transform: uppercase;
	transition: transform 80ms ease-in;
	border-radius: 7px;
	}

	button:active {
	transform: scale(0.95);
	color: white
	}

	.btn.focus, .btn:focus {
	outline: 0;
	box-shadow: none!important;
	color: white;
	}

	.btn-info:hover {
	background-color: gold;
	color: white;
	border-color: gold;
	}

	.btn-info {color: white;}

	.box {
	border: 1px solid rgba(0,0,0,0.2);
	padding: 1.5rem;
	margin-left:10px;
	margin-right:10px;
	border-radius: 13px;
	margin: auto;
	width: 100%;
	}

	.inp {
	border:none;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	border-radius: 0px;
	padding: 5px 10px;
	outline: none;
	}

	[placeholder]:focus::-webkit-input-placeholder {
	transition: text-indent 0.4s 0.4s ease;
	text-indent: -100%;
	opacity: 1;
	}

	.inp.focus, .inp:focus {
	outline: 0;
	box-shadow: none!important;
	/* color: green; */
	border-bottom: 1px solid rgba(0,0,0,0.2);
	}
	<!DOCTYPE html>
	<html>

	<head>
	<base target="_top">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
	integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
	</head>

	<body>
	<div class="container">
	<div class="row frame">

	<h5 class="mt-4 text-center">เว็บแอป</h5>
	<h6 class="mb-4 text-center">การสร้าง checkbox ด้วยสคริปต์</h6>

	<div class="form-group mb-4 box">
	<input type="text" class="form-control inp mb-3" id="input1" placeholder="ชื่อ สกุล" autocomplete="off">
	</div>

	<div class="form-group mb-4 box">
	<span>โปรดเลือกรายการ</span><br>
	<?!= setOptions() ?>
	</div>

	<div class="form-group mt-4 mb-4 text-center">
	<button type="button" class="btn btn-primary" onclick="whenButtonClicked()">บันทึกข้อมูล</button>
	</div>

	</div>
	</div>
	<script>
	function whenButtonClicked(){
	event.preventDefault()
	let input1 = document.getElementById('input1');
	let checked;
	let temp = document.querySelectorAll('.multi:checked');
	if(temp != null){
	let checkedvalues = Array.prototype.map.call(temp, function(el){ return el.value })
	checked = checkedvalues.join(",")
	}else{
	checked = null
	}
	let objData = {input1: input1.value, checked: checked}

	google.script.run.withSuccessHandler(()=>{
	input1.value = ''
	document.querySelectorAll('.multi').forEach(function(el) { el.checked = false; } )
	}).saveData(objData)
	}
	</script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"
	integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"
	integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous">
	</script>
	</body>
	</html>