从列表中选择后删除选定的复选框项目答案

【问题标题】：delete selected checkbox item after selection from list从列表中选择后删除选定的复选框项目
【发布时间】：2016-01-28 07:38:21
【问题描述】：

我有一个弹出窗口，其中有一个复选框项目列表可供选择。从弹出窗口中选择项目并单击“更新”按钮后，页面上会显示值。

HTML 代码

<form action="" id="popup_form">

           <div class="added">
           <div class="column-left">
             <label class="checkbox" for="checkbox1" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="One" id="checkbox1" data-toggle="checkbox">
         One
          </label>
          <br/>
          <label class="checkbox" for="checkbox2" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Two" id="checkbox2" data-toggle="checkbox">
           Two
          </label>
          <br/>

                  </div>

                   <div class="column-center">
           <label class="checkbox" for="checkbox3" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
   Three
          </label>
                 <br/>
           <label class="checkbox" for="checkbox4" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
          Four
          </label>
                 <br/>

          </div>

            <div class="column-center-right">
           <label class="checkbox" for="checkbox5" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Five" id="checkbox5" data-toggle="checkbox">
        Five
          </label> 
            <br/>
           <label class="checkbox" for="checkbox6" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Six" id="checkbox6" data-toggle="checkbox">
           Six
          </label> 
            <br/>

           </div>

            <div class="column-right">

           <label class="checkbox" for="checkbox7" style="font-size:20px;">
            <input type="checkbox" name="complaint" value=" Seven" id="checkbox7" data-toggle="checkbox">
            Seven
          </label> 
             <br/>
           <label class="checkbox" for="checkbox8" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Eight" id="checkbox8" data-toggle="checkbox">
       Eight
          </label> 
             <br/>

          </div>

           </div> 
     <br/>
            <input type="submit" name="submit" id="update" class="button button-orange" style="width: 90px; margin-top: 450px;
    margin-left: -533px;" value="Update">
           <input type="submit" name="cancel" id="cancel" class="button button-orange" style="width: 90px; background-color:#36606e;" value="Cancel">

</form>

现在我希望从弹出列表中删除所选项目。例如如果选择了值“一”，则该值应从该弹出列表项中删除并应显示在页面上。

我没有得到解决方案。我怎样才能用 jquery 或 javascript 得到它？

任何帮助都会有所帮助。

弹出列表如下图

点击“更新”后，所选项目将显示在如下页面上

【问题讨论】：

@Noman 我不知道如何获得它。
没有 php 代码，也没有 jquery 代码。与我们分享您的代码，否则我们无法帮助您。
我没有 jquery/JS 代码。对于上述情况，我没有得到它。
你需要在这个html中至少添加一个screen shot/picture，这样有人可以帮你处理jquery。
@noman 我已添加图片以供参考。

标签： javascript jquery

【解决方案1】：

更新

查看另一个元素上的选定项

http://plnkr.co/edit/3lqVQfuqJ7ZTKMbIlGpH?p=preview

jquery

$(document).ready(function() {

  $('.push-button').click(function() {
    $('input[name=complaint]:checked').parent().hide();
    var list = $('.content ul');
    list.empty();
    $('input[name=complaint]:checked').each(function() {
      var item = $('<li>');
      item.html($(this).val());
      list.append(item);
    });

  });
});

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-2.1.4.js" data-semver="2.1.4" data-require="jquery"></script>
    <script src="script.js"></script>
  </head>

  <body>
 <div class="added">
           <div class="column-left">
             <label class="checkbox" for="checkbox1" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="One" id="checkbox1" data-toggle="checkbox">
         One
          </label>
          <br/>
          <label class="checkbox" for="checkbox2" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Two" id="checkbox2" data-toggle="checkbox">
           Two
          </label>
          <br/>

                  </div>

                   <div class="column-center">
           <label class="checkbox" for="checkbox3" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
   Three
          </label>
                 <br/>
           <label class="checkbox" for="checkbox4" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
          Four
          </label>
                 <br/>

          </div>

            <div class="column-center-right">
           <label class="checkbox" for="checkbox5" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Five" id="checkbox5" data-toggle="checkbox">
        Five
          </label> 
            <br/>
           <label class="checkbox" for="checkbox6" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Six" id="checkbox6" data-toggle="checkbox">
           Six
          </label> 
            <br/>

           </div>

            <div class="column-right">

           <label class="checkbox" for="checkbox7" style="font-size:20px;">
            <input type="checkbox" name="complaint" value=" Seven" id="checkbox7" data-toggle="checkbox">
            Seven
          </label> 
             <br/>
           <label class="checkbox" for="checkbox8" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Eight" id="checkbox8" data-toggle="checkbox">
       Eight
          </label> 
             <br/>

          </div>

           </div> 

<button type="button" class="push-button">List Data To the Content </button>


<div class="content">
  <h1>View Selected Datas</h1>
  <ul class="content-list">

  </ul>
</div>
  </body>

</html>

【讨论】：

感谢您的回复。在您提供的链接中，当我们选择例如'一个'，其他项目被删除。我不寻找。我希望当我们单击按钮时，选定的项目应该从列表中删除，并且它应该显示在页面上。这与我的预期相反。
例如，我正在使用项目“一”。您的演示仅适用于项目“一”。你能更新你的答案吗？
是的。当我们单击按钮时，选定的项目应该从列表中删除并显示在页面上。就我而言，我在弹出窗口中使用列表。当我单击“更新”按钮时，所选项目应删除并应显示在页面上。如果下次我点击“+添加/编辑”按钮，那么该项目不应该在该列表中。
一旦我们选中复选框，所选项目就会被删除。点击按钮后可以删除吗？
太棒了..非常感谢 Saltuk。这就是我所期待的。感谢您的帮助:)