удалить выбранный флажок после выбора из списка

У меня есть всплывающее окно, на котором есть список элементов для выбора. После выбора пункта из всплывающего окна и нажатия кнопки «Обновить» на странице отображается значение.удалить выбранный флажок после выбора из списка

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?

Любая помощь будет полезна.

выпадающий список что-то вроде ниже изображения

После нажатия выбранный пункт «Обновить» будет отображаться на странице, как показано ниже

источник

2016-01-28 kiran

где JQuery? – Noman

@Noman Я не понимаю, как это получить. – kiran

Отсутствие кода php и никакого кода jquery. Поделитесь своим кодом с нами, иначе мы не сможем вам помочь. – Huelfe

Обновлено

просмотр выбранного элемента на другой элемент

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>

источник

2016-01-28 08:27:10 Saltuk

благодарит за ответ. В приведенной ссылке, когда мы выбираем, например, «Один», другие предметы удалены. Этого я не ищу. Я хочу, чтобы выбранный элемент удалялся из списка, когда мы нажимаем кнопку, а также он должен отображаться на странице. Это происходит напротив того, что я ожидал. – kiran

Я использую пункт «Один», например. ваша демо работает только для элемента «Один». Не могли бы вы обновить свой ответ? – kiran

do u просто хотите удалить выбранный элемент из списка флажков? .. – Saltuk

удалить выбранный флажок после выбора из списка

ответ

Смежные вопросы