如何附加选中的输入类型=“复选框”

Question

我有这个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);
            }*/





  }

Answer 1

您可以验证是否已检查任何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>