Question

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

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>

现在我想要从弹出列表中删除所选项目。例如如果选择了值“One”，那么应该从该弹出列表中删除项目并显示在页面上。

我没有得到解决方案。如何使用jquery或javascript获得它？

任何帮助都会有所帮助。

弹出式列表类似于图片

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

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

从列表中选择后删除所选复选框项

1 个答案: