JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<span>
  <input type="checkbox" name="Motorboote[]" id="opt_24_0" class="checkbox" value="Admiral+Lifestyle" checked>
  <label id="lbl_24_0" for="opt_24_0">Ausflugsboot</label>
</span>
<br>
<input id="opt_24_1" type="checkbox" class="checkbox" checked>
<label id="lbl_24_1" for="opt_24_1">CHK1</label>
<br>
<input id="opt_24_2" type="checkbox" class="checkbox">
<label id="lbl_24_2" for="opt_24_2">CHK2</label>
<br>
<span id="message"></span>
<legend>Anfrage stellen für:</legend>

JavaScript

//jQuery checkbox checker on page load/event

$(".checkbox").click(function() {
  boxChecked();
});

function boxChecked() {
$("legend").text("Anfrage stellen für: ");
  if ($("input:checkbox:checked").length > 0)
  {
    console.log("checked");
    $("input:checkbox:checked").each(function(i) 
    {
      var thisid = $(this).attr("id");
      var labelText = $('label[for="' + thisid + '"]').text();

		    	str = $("legend").text();
		    	if (str.indexOf("" + labelText + ", ") >= 0)
		    	{
		    		$("legend").text(str.replace("" + labelText + ", " , ""));
		    	}
		    	else if (str.indexOf(", " + labelText) >= 0)
		    	{
		    		$("legend").text(str.replace(", " + labelText , ""));
		    	}
		    	else if (str.indexOf("" + labelText) >= 0){
		    		$("legend").text(str.replace("" + labelText, ""));
		    	}
		    	else if (str == "Anfrage stellen für: ")
		    	{
		    		$("legend").append("" + labelText);
		    	}
		    	else
		    	{
		    		$("legend").append(", " + labelText);
		    	}
    });
  }
  else
  {
		console.log("not checked");
  }
}

boxChecked();