Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Изменения checkbox (https://javascript.ru/forum/jquery/70244-izmeneniya-checkbox.html)

AlexSergeev1990 22.08.2017 09:06

Изменения checkbox
 
Ребят подскажите как сделать копирование отмеченных checkbox-ов в другой див. Я сделал копирование всех checkbox-ов.
Но мне нужно не просто копирование , а так чтобы если checkbox отмечался то он копировался в другой див, а если с него снята галочка то он удалялся оттуда.

Nexus 22.08.2017 09:37

Цитата:

Сообщение от AlexSergeev1990
подскажите как сделать

, повесить обработчик на каждый чекбокс (событие change), проверять отмечен ли чек, если да, то производить копирование этого элемента в другой див, в противном случае удалять клон этого чека из другого дива.
Ease.

ksa 22.08.2017 10:05

Цитата:

Сообщение от AlexSergeev1990
как сделать

Так ты тестовый пример сделай, на нем и покажут как сделать... ;)

AlexSergeev1990 22.08.2017 10:36

Цитата:

Сообщение от ksa (Сообщение 462297)
Так ты тестовый пример сделай, на нем и покажут как сделать... ;)

<script>
$("input:checkbox").change(function(){ 
    if($(this).prop('checked')){
       $(this).clone().prependTo($('#right'));   
    }else{ 
           $(this).detach();
       }
}); 
</script>


условие else удаляет с которых снята галочка...а мне нужно чтобы удаляло только клоны, при снятий отметки....

ksa 22.08.2017 10:47

Цитата:

Сообщение от AlexSergeev1990
условие else удаляет с которых снята галочка...а мне нужно чтобы удаляло только клоны

Тогда нужно искать тот клон и его удалять...

У клонов есть какое-то соответствие с оригиналом? Если нет - так нужно сделать его, потом по тому соответствию искать и удалять.

рони 22.08.2017 11:20

AlexSergeev1990,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
$("#left").on("click", "input:checkbox", function() {
var data = $(this).data();
this.checked ? (data.clone = $(this).clone().prependTo("#right")): data.clone.remove()
})
});
  </script>
</head>

<body>
<div id="left"><input name="" type="checkbox"><input name="" type="checkbox"><input name="" type="checkbox"></div>
<div id="right"></div>
</body>
</html>

AlexSergeev1990 22.08.2017 12:41

Спасибо большое) Все оказывается проще)

AlexSergeev1990 22.08.2017 13:08

Ребят все хорошо)все правильно) но у меня еще одна стена!!Подскажите а как сделать чтобы скопировался и текст например у меня
список
<ul>
<li><input name="" type="checkbox">Яблоко</li>
<li><input name="" type="checkbox">Груша</li>
<li><input name="" type="checkbox">Слива</li>
</ul>

скрипт копирует только checkbox без названии....а мне надо чтобы там был такой же список//

ksa 22.08.2017 13:14

Цитата:

Сообщение от AlexSergeev1990
скрипт копирует только checkbox без названии....а мне надо чтобы там был такой же список

Значит нужно копировать не сам чек, а только текст. Причем текст желательно так же обернуть в теги, например в
<label>...</label>

рони 22.08.2017 15:07

Цитата:

Сообщение от AlexSergeev1990
скопировался и текст

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
$("#left").on("click", "input:checkbox", function() {
var data = $(this).data();
this.checked ? (data.clone = $(this).parent().clone().prependTo("#right")): data.clone.remove()
})
});
  </script>
</head>

<body>
<ul id="left">
<li><input name="" type="checkbox">Яблоко</li>
<li><input name="" type="checkbox">Груша</li>
<li><input name="" type="checkbox">Слива</li>
</ul>


<ul id="right"></ul>
</body>
</html>


Часовой пояс GMT +3, время: 01:21.