Форум

AlexSergeev1990 · #1 (**permalink**) 22.08.2017, 09:06

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

Nexus · #2 (**permalink**) 22.08.2017, 09:37

Сообщение от AlexSergeev1990

подскажите как сделать

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

ksa · #3 (**permalink**) 22.08.2017, 10:05

Сообщение от AlexSergeev1990

как сделать

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

AlexSergeev1990 · #4 (**permalink**) 22.08.2017, 10:36

Сообщение от ksa

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

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

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

ksa · #5 (**permalink**) 22.08.2017, 10:47

Сообщение от AlexSergeev1990

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

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

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

рони · #6 (**permalink**) 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 · #7 (**permalink**) 22.08.2017, 12:41

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

AlexSergeev1990 · #8 (**permalink**) 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 · #9 (**permalink**) 22.08.2017, 13:14

Сообщение от AlexSergeev1990

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

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

<label>...</label>

рони · #10 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript