I already have the code to extract direct onscreen output after selecting different checkboxes. But I want the output to be categorized with some formatting of the text (see picture): COUNTRY 1/2/3/4 should be on separate lines depending on the checkbox number 1/2/3/4 selected, and if possible I want to remove some of the redundant commas.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("input[name='A']").change(function(){
var checkedCountries = $("input[name='A']:checked");
var countries = [];
for(var i = 0; i<checkedCountries.length; i++) {
countries.push(checkedCountries[i].value + ",");
}
$("#countryList").val(countries.join(" "));
});
$("#copyBtn").click(function() {
var copyText = document.getElementById("countryList");
copyText.select();
document.execCommand("Copy");
alert("Copied the text: " + copyText.value);
});
});
</script>
</head>
<body>
<div class="mainpage_box"><h3><input type="checkbox" name="A" value="COUNTRY 1:"><span>COUNTRY 1:</span></h3>
<div id="mainpage-admins" title="System administrators" class="items">
<input type="checkbox" name="A" value="America">America<br>
<input type="checkbox" name="A" value="Burma">Burma<br>
<input type="checkbox" name="A" value="China">China<br>
<input type="checkbox" name="A" value="Denmark">Denmark<br>
<input type="checkbox" name="A" value="England">England<br>
<input type="checkbox" name="A" value="France">France<br>
</div></div>
<div class="mainpage_box"><h3><input type="checkbox" name="A" value="COUNTRY 2:"><span>COUNTRY 2:</span></h3>
<div id="mainpage-admins" title="System administrators" class="items">
<input type="checkbox" name="A" value="America">America<br>
<input type="checkbox" name="A" value="Burma">Burma<br>
<input type="checkbox" name="A" value="China">China<br>
<input type="checkbox" name="A" value="Denmark">Denmark<br>
<input type="checkbox" name="A" value="England">England<br>
<input type="checkbox" name="A" value="France">France<br>
</div></div>
<textarea id="countryList" rows="20" cols="150"></textarea></br>
The red arrow in the picture show the output screen I'm looking for.
Aucun commentaire:
Enregistrer un commentaire