Как автоматизировать прямой вывод из разных флажков? - PullRequest
Новая
       1

Как автоматизировать прямой вывод из разных флажков?

0 голосов
/ 22 сентября 2019

Пример с выводом

У меня уже есть код для извлечения прямого вывода на экран после выбора различных флажков.Но я хочу, чтобы вывод был классифицирован с некоторым форматированием текста (см. Рисунок): СТРАНА 1/2/3/4 должна быть в отдельных строках в зависимости от выбранного номера флажка 1/2/3/4, и, если возможно, яхочу удалить некоторые из лишних запятых.

<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>

Красная стрелка на рисунке показывает искомый экран вывода.

1 Ответ

0 голосов
/ 22 сентября 2019

Это можно сделать достаточно легко, если вы добавите класс в поля категории страны, а затем соответствующим образом измените строку-разделитель. 

$(document).ready(function() {
  $("input[name='A']").change(function() {
    var checkedCountries = $("input[name='A']:checked");
    var countries = [];
    for (var i = 0; i < checkedCountries.length; i++) {
      // default separator
      let separator = ", ";
      // no comma after category
      if ($(checkedCountries[i]).is('.category')) {
        // EDIT add line break after category
        //separator = " ";
        separator = "\n";
      }
      if (checkedCountries[i + 1] == undefined) {
        // last item needs no separator
        separator = "";
      } else if ($(checkedCountries[i + 1]).is('.category')) {
        // the next item is a category, separate with new line
        separator = "\n";
      }

      // put separator at the end of the value
      countries.push(checkedCountries[i].value + separator);
    }
    // join with null
    $("#countryList").val(countries.join(""));


  });


  $("#copyBtn").click(function() {
    var copyText = document.getElementById("countryList");
    copyText.select();
    document.execCommand("Copy");
    alert("Copied the text: " + copyText.value);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainpage_box">
  <h3><input type="checkbox" name="A" value="COUNTRY 1:" class="category"><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:" class="category"><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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...