Как добавить проверенный тип ввода = "флажок" - PullRequest
Новая
       17

Как добавить проверенный тип ввода = "флажок"

0 голосов
/ 17 марта 2019

У меня есть этот HTML-код: 

<div class="courseBody">
  <ul>
    <li>
      <input type="checkbox" name="js-fundamentals" value="js-fundamentals" />
      <label>JS Fundamentals - January</label>
    </li>
    <li>
      <input type="checkbox" name="js-advanced" value="js-advanced" />
      <label>JS Advanced - February</label>
    </li>
    <li>
      <input type="checkbox" name="js-applications" value="js-applications" />
      <label>JS Applications - March</label>
    </li>
    <li>
      <input type="checkbox" name="js-web" value="js-web" />
      <label>JS Web - April</label>
    </li>
  </ul>
  <div id="educationForm">
    <label>Onsite</label>
    <input type="radio" name="educationForm" value="onsite" checked>
    <label>Online</label>
    <input type="radio" name="educationForm" value="online">
  </div>
</div>

Тогда я должен проверить один или несколько элементов, таких как: 

<input type="checkbox" name="js-fundamentals" value="js-fundamentals"/>

А затем я должен добавить с выбранным флажком jQuery, между UL тегами: 

<div id="myCourses">
  <h3>My Courses</h3>
  <div class="courseBody">
    <ul></ul>
  </div>
  <div class="courseFoot">
    <p>Cost: 0.00 BGN</p>
  </div>
</div>

Проблема в том, что есть два div элемента одного класса: 

<div class="courseBody">

Я хочу добавить выбранный элемент только ко второму div, как? Пожалуйста, помогите ...

Некоторые обновления:

В HTML-коде есть кнопка: 

<div class="courseFoot">
  <button value="signMeUp">Sign me up</button>
</div>

При нажатии выбранный элемент должен добавляться ко второму div, вот код JavaScript: 

function solve() {
  let $courseFundamentals = $('input[name="js-fundamentals"]');
  let $courseAdvanced = $('input[name="js-advanced"]');
  let $courseApplications = $('input[name="js-applications"]');
  let $courseWeb = $('input[name="js-web"]');
  let $divOne = $('.courseBody');
  let $ulOne = $('<ul>');
  let $divTwo = $('#myCourses');
  let $h = $('<h3>My Courses</h3>');
  let $divThree = $('.courseFoot');

  let onSiteCheck = $('input[value="onsite"]').prop("checked", true);
  let onLineCheck = $('input[value="online"]');

  let $button = $('button[value="signMeUp"]');

  $button.on('click', signMeUp);

  function signMeUp() {
    if ($courseFundamentals.is(':checked')) {
      let $li = $('<li>');
      $li.append($courseFundamentals.val());
      $ulOne.append($li);
      $divOne.append($ulOne);
      $h.append($divOne);
      $divTwo.append($divOne);
    }
    /*if ($courseAdvanced.is(':checked')) {
                let $li = $('<li>');
                $li.append($courseAdvanced.val());
                $ulOne.append($li);
                $divOne.append($ulOne);
                $h.append($divOne);
                $divTwo.append($h);
            }if ($courseApplications.is(':checked')) {
                let $li = $('<li>');
                $li.append($courseApplications.val());
                $ulOne.append($li);
                $divOne.append($ulOne);
                $h.append($divOne);
                $divTwo.append($h);
            }if ($courseWeb.is(':checked')) {
                let $li = $('<li>');
                $li.append($courseWeb.val());
                $ulOne.append($li);
                $divOne.append($ulOne);
                $h.append($divOne);
                $divTwo.append($h);
            }*/





  }

1 Ответ

0 голосов
/ 21 марта 2019

Вы можете проверить, был ли отмечен какой-либо checkbox, а затем сохранить их в массив, чтобы добавить его в нужную цель. 

function getCheckedControls(jsCourses) {
  let result = [], len = jsCourses.length, element;
  for (let c = 0; c < len; c++) {
    element = jsCourses[c];
    if (element.checked) {
      result.push($(element).parent());
    }
  }
  return result;
}

Примерно так: 

$(function() {
  let jsCourses = $("input[type=\"checkbox\"]"),
    btnSignMeUp = $("button[value=\"signMeUp\"]"),
    myCourses = $("#myCourses");
  btnSignMeUp.on("click", signMeUp);

  function signMeUp() {
    let checkedCourses = getCheckedControls(jsCourses), len = checkedCourses.length, element;
    for (let c = 0; c < len; c++) {
      element = checkedCourses[c];
      $(myCourses.children()[1]).children()[0].append($(checkedCourses[c])[0]);
    }
  }

  function getCheckedControls(jsCourses) {
    let result = [], len = jsCourses.length, element;
    for (let c = 0; c < len; c++) {
      element = jsCourses[c];
      if (element.checked) {
        result.push($(element).parent());
      }
    }
    return result;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="courseBody">
  <ul>
    <li>
      <input type="checkbox" name="js-fundamentals" value="js-fundamentals" />
      <label>JS Fundamentals - January</label>
    </li>
    <li>
      <input type="checkbox" name="js-advanced" value="js-advanced" />
      <label>JS Advanced - February</label>
    </li>
    <li>
      <input type="checkbox" name="js-applications" value="js-applications" />
      <label>JS Applications - March</label>
    </li>
    <li>
      <input type="checkbox" name="js-web" value="js-web" />
      <label>JS Web - April</label>
    </li>
  </ul>
  <div id="educationForm">
    <label>Onsite</label>
    <input type="radio" name="educationForm" value="onsite" checked>
    <label>Online</label>
    <input type="radio" name="educationForm" value="online">
  </div>
</div>
<hr />
<div id="myCourses">
  <h3>My Courses</h3>
  <div class="courseBody">
    <ul></ul>
  </div>
  <div class="courseFoot">
    <p>Cost: 0.00 BGN</p>
  </div>
</div>
<div class="courseFoot">
  <button value="signMeUp">Sign me up</button>
</div>
...