Dodaj niezaznaczone pola wyboru HTML

Rozwiązanie, które najbardziej mi się podobało, to umieszczenie ukrytego wejścia o tej samej nazwie, co pole wyboru, które może nie być zaznaczone. Myślę, że to działa tak, że jeśli pole wyboru nie jest zaznaczone, ukryte wejście jest nadal pomyślne i wysłane do serwera, ale jeśli pole wyboru jest zaznaczone, zastąpi ukryte wejście przed nim. W ten sposób nie musisz śledzić, które wartości w opublikowanych danych miały pochodzić z pól wyboru.

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>

Rozwiązałem to używając prostego (natywnego) javascript:

<input type="hidden" name="checkboxName" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">

Uważaj, aby nie mieć żadnych spacji lub przerw między tymi dwoma elementami wejściowymi!

W PHP możesz sprawdzić nazwane ukryte pole pod kątem 0 (nie ustawione) lub 1 (ustawione).

Powszechną techniką wokół tego jest przenoszenie ukrytej zmiennej wraz z każdym pole wyboru.

<input type="checkbox" name="mycheckbox" />
<input type="hidden" name="mycheckbox.hidden"/>

Po stronie serwera najpierw wykrywamy listę ukrytych zmiennych i dla każdej z ukrytych zmiennych staramy się sprawdzić, czy odpowiedni wpis checkbox jest przesłany w formularzu data, czy nie.

Algorytm po stronie serwera wyglądałby prawdopodobnie następująco:

for input in form data such that input.name endswith .hidden
  checkboxName = input.name.rstrip('.hidden')
  if chceckbName is not in form, user has unchecked this checkbox

Powyższe nie odpowiada dokładnie na pytanie, ale zapewnia alternatywne sposoby osiągnięcia podobnej funkcjonalności.

Moim ulubionym jest dodanie ukrytego pola o tej samej nazwie, które będzie używane, jeśli pole wyboru nie jest zaznaczone. Ale rozwiązanie nie jest tak proste, jak mogłoby się wydawać.

Jeśli dodasz ten kod:

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>

Przeglądarka tak naprawdę nie będzie dbać o to, co robisz tutaj. Przeglądarka wyśle oba parametry do serwera, a serwer musi zdecydować, co z nimi zrobić.

PHP na przykład przyjmuje ostatnią wartość jako tę do użycia (zobacz: autorytatywna pozycja duplikatu HTTP GET query keys )

Ale inne systemy, z którymi pracowałem (oparte na Javie) robią to dokładnie tak samo - oferują tylko pierwszą wartość. Zamiast tego. NET da ci tablicę z obydwoma elementami

Spróbuję to przetestować z node.js, Python i Perl kiedyś.

Nie musisz tworzyć ukrytego pola dla wszystkich checkboxów po prostu skopiuj mój kod. zmieni wartość pola wyboru, jeśli nie jest zaznaczone, value przypisze 0, a jeśli pole wyboru jest zaznaczone, przypisze value do 1

$("form").submit(function () {

    var this_master = $(this);

    this_master.find('input[type="checkbox"]').each( function () {
        var checkbox_this = $(this);


        if( checkbox_this.is(":checked") == true ) {
            checkbox_this.attr('value','1');
        } else {
            checkbox_this.prop('checked',true);
            //DONT' ITS JUST CHECK THE CHECKBOX TO SUBMIT FORM DATA    
            checkbox_this.attr('value','0');
        }
    })
})

Możesz zrobić trochę Javascript w zdarzeniu submit formularza. To wszystko, co możesz zrobić, nie ma sposobu, aby przeglądarki zrobiły to same. Oznacza to również, że twój formularz zostanie złamany dla użytkowników bez Javascript. Lepiej jest wiedzieć na serwerze, które pola wyboru są, więc można wywnioskować, że te nieobecne w opublikowanych wartościach formularza ($_POST w PHP) są niezaznaczone.

Wykonałbym następujące czynności.

Mieć moje ukryte pole wprowadzania o tej samej nazwie z checkbox input

<input type="hidden" name="checkbox_name[]" value="0" />
<input type="checkbox" name="checkbox_name[]" value="1" />

A potem, gdy piszę Post, najpierw usuwam zduplikowane wartości wychwycone w tablicy $_POST, która wyświetla każdą z unikalnych wartości.

  $posted = array_unique($_POST['checkbox_name']);
  foreach($posted as $value){
    print $value;
  }

Dostałem to z posta Usuń zduplikowane wartości z tablicy

$('input[type=checkbox]').on("change",function(){
    var target = $(this).parent().find('input[type=hidden]').val();
    if(target == 0)
    {
        target = 1;
    }
    else
    {
        target = 0;
    }
    $(this).parent().find('input[type=hidden]').val(target);
});

<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>
<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>
<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>

Jeśli pominiesz nazwę checkboxa, nie zostanie ona przekazana. Tylko tablica test_checkbox.

" wybrałem podejście serwerowe. Wygląda na to, że działa dobrze - dzięki. - reach4thelasers Dec 1 '09 at 15: 19" chciałbym polecić go od właściciela. Jak cytuję: rozwiązanie javascript zależy od sposobu obsługi serwera (nie sprawdzałem tego)

Takie jak

if(!isset($_POST["checkbox"]) or empty($_POST["checkbox"])) $_POST["checkbox"]="something";

Najpierw wypróbowałem wersję sama. Dobry pomysł, ale powoduje to, że w postaci o tej samej nazwie występuje wiele elementów. Jeśli używasz javascript, który wyszukuje elementy na podstawie nazwy, zwróci teraz tablicę elementów.

Rozpracowałem pomysł Shailesha w PHP, działa dla mnie. Oto Mój kod:

/* Delete '.hidden' fields if the original is present, use '.hidden' value if not. */
foreach ($_POST['frmmain'] as $field_name => $value)
{
    // Only look at elements ending with '.hidden'
    if ( !substr($field_name, -strlen('.hidden')) ) {
        break;
    }

    // get the name without '.hidden'
    $real_name = substr($key, strlen($field_name) - strlen('.hidden'));

    // Create a 'fake' original field with the value in '.hidden' if an original does not exist
    if ( !array_key_exists( $real_name, $POST_copy ) ) {
        $_POST[$real_name] = $value;
    }

    // Delete the '.hidden' element
    unset($_POST[$field_name]);
}

Większość odpowiedzi wymaga użycia JavaScript lub zduplikowanych kontrolek wejściowych. Czasami musi to być obsługiwane w całości po stronie serwera.

Uważam, że (zamierzonym) kluczem do rozwiązania tego wspólnego problemu jest kontrola wprowadzania formularza.

Aby poprawnie interpretować i obsługiwać niezaznaczone wartości dla checkboxów, musisz mieć wiedzę na temat:

1. nazwy pól wyboru
2. Nazwa zgłoszenia formularza element

Sprawdzając, czy formularz został wysłany (wartość jest przypisana do elementu wejściowego submission), można przyjąć dowolne niezaznaczone wartości pola wyboru .

Na przykład:

<form name="form" method="post">
  <input name="value1" type="checkbox" value="1">Checkbox One<br/>
  <input name="value2" type="checkbox" value="1" checked="checked">Checkbox Two<br/>
  <input name="value3" type="checkbox" value="1">Checkbox Three<br/>
  <input name="submit" type="submit" value="Submit">
</form>

Podczas korzystania z PHP, jest dość trywialne wykrywanie, które pola wyboru zostały zaznaczone.

<?php

$checkboxNames = array('value1', 'value2', 'value3');

// Persisted (previous) checkbox state may be loaded 
// from storage, such as the user's session or a database.
$checkboxesThatAreChecked = array(); 

// Only process if the form was actually submitted.
// This provides an opportunity to update the user's 
// session data, or to persist the new state of the data.

if (!empty($_POST['submit'])) {
    foreach ($checkboxNames as $checkboxName) {
        if (!empty($_POST[$checkboxName])) {
            $checkboxesThatAreChecked[] = $checkboxName;
        }
    }
    // The new state of the checkboxes can be persisted 
    // in session or database by inspecting the values 
    // in $checkboxesThatAreChecked.
    print_r($checkboxesThatAreChecked);
}

?>

Dane początkowe mogą być ładowane przy każdym załadowaniu strony, ale powinny być modyfikowane tylko wtedy, gdy formularz został przesłany. Ponieważ nazwy pól wyboru są znane wcześniej, mogą być przemieszczane i kontrolowane indywidualnie, tak że brak ich indywidualnych wartości wskazuje, że nie są sprawdzane.

Używam tego bloku jQuery, który doda ukryte dane wejściowe w czasie wysyłania do każdego niezaznaczonego checkboxa. Gwarantuje to, że zawsze otrzymasz wartość przekazaną za każde pole wyboru, za każdym razem, bez zaśmiecania znaczników i ryzyka zapomnienia o tym na polu wyboru dodanym później. Jest również agnostyczny dla dowolnego stosu backendowego (PHP, Ruby itp.) bierzesz.

// Add an event listener on #form's submit action...
$("#form").submit(
    function() {

        // For each unchecked checkbox on the form...
        $(this).find($("input:checkbox:not(:checked)")).each(

            // Create a hidden field with the same name as the checkbox and a value of 0
            // You could just as easily use "off", "false", or whatever you want to get
            // when the checkbox is empty.
            function(index) {
                var input = $('<input />');
                input.attr('type', 'hidden');
                input.attr('name', $(this).attr("name")); // Same name as the checkbox
                input.attr('value', "0"); // or 'off', 'false', 'no', whatever

                // append it to the form the checkbox is in just as it's being submitted
                var form = $(this)[0].form;
                $(form).append(input);

            }   // end function inside each()
        );      // end each() argument list

        return true;    // Don't abort the form submit

    }   // end function inside submit()
);      // end submit() argument list

Można również przechwycić formularz.submit event I reverse check before submit

$('form').submit(function(event){
    $('input[type=checkbox]').prop('checked', function(index, value){
        return !value;
    });
});

Widzę, że to pytanie jest stare i ma tyle odpowiedzi, ale i tak dam grosza. Mój głos jest za rozwiązaniem javascript w przypadku "submit" formularza, jak niektórzy zauważyli. Bez podwajania wejść (zwłaszcza jeśli masz długie nazwy i atrybuty z kodem php zmieszanym z html), bez problemów po stronie serwera (które wymagałyby znajomości wszystkich nazw pól i sprawdzania ich pojedynczo), po prostu pobierz wszystkie niezaznaczone elementy, Przypisz im wartość 0 (lub cokolwiek, co musisz wskazać "Nie zaznaczone" status), a następnie zmienić ich atrybut "checked" na true

    $('form').submit(function(e){
    var b = $("input:checkbox:not(:checked)");
    $(b).each(function () {
        $(this).val(0); //Set whatever value you need for 'not checked'
        $(this).attr("checked", true);
    });
    return true;
});

W ten sposób będziesz miał tablicę $_POST taką jak:

Array
(
            [field1] => 1
            [field2] => 0
)

$('form').submit(function () {
    $(this).find('input[type="checkbox"]').each( function () {
        var checkbox = $(this);
        if( checkbox.is(':checked')) {
            checkbox.attr('value','1');
        } else {
            checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
            checkbox.prop('disabled', true);
        }
    })
});

Podoba mi się również rozwiązanie, które po prostu opublikować Dodatkowe pole wprowadzania, za pomocą JavaScript wydaje się trochę trudne do mnie.

W zależności od tego, czego używasz, backend będzie zależał od tego, które wejście pójdzie pierwsze.

W przypadku backendu serwera, w którym używane jest pierwsze wystąpienie (JSP), należy wykonać następujące czynności.

  <input type="checkbox" value="1" name="checkbox_1"/>
  <input type="hidden" value="0" name="checkbox_1"/>

W przypadku backendu serwerowego, w którym używane jest ostatnie wystąpienie (PHP, Rails), powinieneś wykonać następujące czynności.

  <input type="hidden" value="0" name="checkbox_1"/>
  <input type="checkbox" value="1" name="checkbox_1"/>

Dla serwera backend, gdzie wszystkie zdarzenia są przechowywane w typie danych list([],array). (Python / Zope)

Możesz pisać w dowolnej kolejności, wystarczy spróbować pobrać wartość z wejścia z atrybutem checkbox type. Tak więc pierwszy indeks listy, jeśli pole wyboru było przed ukrytym elementem, a ostatni indeks, jeśli pole wyboru było po ukrytym elemencie.

Dla zaplecza serwera, w którym wszystkie wystąpienia są połączone przecinkiem (ASP.NET / IIS) Będziesz musiał (split/explode) ciąg znaków za pomocą przecinka jako ogranicznika do utworzenia typu danych listy. ([])

Teraz możesz spróbować pobrać pierwszy indeks z listy, jeśli pole wyboru było przed ukrytym elementem i pobrać ostatni indeks, jeśli pole wyboru było po ukrytym elemencie.

Źródło obrazu

To co zrobiłem było trochę inne. Najpierw zmieniłem wartości wszystkich niezaznaczonych pól wyboru. Do "0", a następnie wybrać je wszystkie, więc wartość zostanie przekazana.

function checkboxvalues(){
  $("#checkbox-container input:checkbox").each(function({ 
    if($(this).prop("checked")!=true){
      $(this).val("0");
      $(this).prop("checked", true);
    }
  });
}

Wolałbym zestawić $_POST

if (!$_POST['checkboxname']) !$_POST['checkboxname'] = 0;

Jeśli POST nie ma wartości 'checkboxname', to nie został zaznaczony tak, jako wartość.

Możesz utworzyć tablicę wartości ckeckbox i utworzyć funkcję, która sprawdza, czy wartości istnieją, jeśli nie, to nie jest zaznaczona i możesz przypisać wartość

Przykład na akcje Ajax jest(':checked') używany jQuery zamiast .val ();

            var params = {
                books: $('input#users').is(':checked'),
                news : $('input#news').is(':checked'),
                magazine : $('input#magazine').is(':checked')
            };

Params otrzyma wartość TRUE lub FALSE..

Pola wyboru zazwyczaj reprezentują dane binarne, które są przechowywane w bazie danych jako wartości Yes/No, Y/N lub 1/0. Pola wyboru HTML mają zły charakter, aby wysłać wartość do serwera tylko jeśli pole wyboru jest zaznaczone! Oznacza to, że skrypt serwera na innej stronie musi wiedzieć z góry, jakie są wszystkie możliwe pola wyboru na stronie internetowej, aby móc przechowywać wartości dodatnie (zaznaczone) lub ujemne (niezaznaczone). W rzeczywistości tylko wartości ujemne są problemem (gdy użytkownik odznacza wcześniej (pre)sprawdzoną wartość - skąd serwer może wiedzieć to, gdy nic nie jest wysyłane, jeśli nie wie z góry, że ta nazwa powinna być wysłana). Jeśli masz skrypt po stronie serwera, który dynamicznie tworzy skrypt aktualizacji, to jest problem, ponieważ nie wiesz, jakie wszystkie checkboxy mają być odebrane, aby ustawić wartość Y dla zaznaczonych i wartość N dla niezaznaczonych (nie odebranych).

Ponieważ przechowuję wartości " Y " I " N " w bazie danych i reprezentuję je za pomocą zaznaczonych i niezaznaczonych pól wyboru na stronie, dodałem ukryte pole dla każdej wartości (checkbox) z wartościami " Y " I " N " użyj pól wyboru Tylko do wizualnej reprezentacji i użyj simple JavaScript function check (), aby ustawić wartość if zgodnie z wyborem.

<input type="hidden" id="N1" name="N1" value="Y" />
<input type="checkbox"<?php if($N1==='Y') echo ' checked="checked"'; ?> onclick="check(this);" />
<label for="N1">Checkbox #1</label>

Użyj jednego słuchacza JavaScript onclick i wywołania funkcji check () dla każdego checkboxe na mojej stronie:

function check(me)
{
  if(me.checked)
  {
    me.previousSibling.previousSibling.value='Y';
  }
  else
  {
    me.previousSibling.previousSibling.value='N';
  }
}

W ten sposób wartości' Y 'lub' N 'są zawsze wysyłane do skryptu po stronie serwera, wie, jakie są pola, które powinny być aktualizowane i nie ma potrzeby konwersji wartości checkboxa "on" na' Y ' lub nie jest odbierane pole wyboru do "N".

Uwaga: Biała spacja lub nowa linia to również rodzeństwo, więc tutaj potrzebuję .poprzednio.poprzednio.wartość. Jeśli nie ma odstępu między tylko wtedy .poprzednio.wartość

Nie musisz jawnie dodawać onclick listener jak wcześniej, możesz użyć biblioteki jQuery, aby dynamicznie dodawać click listener z funkcją zmiany wartości do wszystkich pól wyboru na stronie:

$('input[type=checkbox]').click(function()
{
  if(this.checked)
  {
    $(this).prev().val('Y');
  }
  else
  {
    $(this).prev().val('N');
  }
});

Problem z checkboxami polega na tym, że jeśli nie są zaznaczone, to nie są publikowane w formularzu. Jeśli zaznaczysz pole wyboru i opublikujesz formularz, otrzymasz wartość pola wyboru w zmiennej $_POST, której możesz użyć do przetworzenia formularza, jeśli nie zostanie zaznaczone, żadna wartość nie zostanie dodana do zmiennej $_POST.

W PHP normalnie można obejść ten problem, wykonując isset () sprawdzić na elemencie checkbox. Jeśli element, którego oczekujesz nie jest ustawiony w zmiennej $_POST, to wiedz, że pole wyboru nie jest zaznaczone i wartość może być false.

if(!isset($_POST['checkbox1']))
{
     $checkboxValue = false;
} else {
     $checkboxValue = $_POST['checkbox1'];
}

Ale jeśli utworzyłeś dynamiczny formularz, nie zawsze będziesz znał atrybut name swoich pól wyboru, jeśli nie znasz nazwy pola wyboru, nie możesz użyć funkcji isset, aby sprawdzić, czy zostało to wysłane ze zmienną $_POST.

Można to osiągnąć wyłącznie za pomocą javascript, ponieważ niezaznaczone pola wyboru nie są przesyłane. Więc potrzebujesz javascript, który np. za kulisami dodaje ukryte pola przy odznaczaniu pola wyboru. Bez javascript nie można tego zrobić.

Jest lepsze obejście. Przede wszystkim podaj atrybut name tylko tym zaznaczonym Polom. Następnie po kliknięciu submit, za pomocą JavaScript function zaznaczasz wszystkie niezaznaczone pola . Więc kiedy submit tylko ci zostaną pobrani w form collection Ci, którzy mają name własność.

  //removing name attribute from all checked checkboxes
                  var a = $('input:checkbox:checked');
                   $(a).each(function () {
                       $(this).removeAttr("name");        
                   });

   // checking all unchecked checkboxes
                   var b = $("input:checkbox:not(:checked)");
                   $(b).each(function () {
                       $(this).attr("checked", true);
                   });

Korzyść: Nie ma potrzeby tworzenia dodatkowych ukrytych pudełek i manipulowania nimi.

@cpburnz mam rację ale do dużo kodu, tutaj jest ten sam pomysł używając mniej kodu:

JS:

// jQuery OnLoad
$(function(){
    // Listen to input type checkbox on change event
    $("input[type=checkbox]").change(function(){
        $(this).parent().find('input[type=hidden]').val((this.checked)?1:0);
    });
});

HTML (zwróć uwagę na nazwę pola używając nazwy tablicy):

<div>
    <input type="checkbox" checked="checked">
    <input type="hidden" name="field_name[34]" value="1"/>
</div>
<div>
    <input type="checkbox">
    <input type="hidden" name="field_name[35]" value="0"/>
</div>
<div>

I dla PHP:

<div>
    <input type="checkbox"<?=($boolean)?' checked="checked"':''?>>
    <input type="hidden" name="field_name[<?=$item_id?>]" value="<?=($boolean)?1:0?>"/>
</div>

Wersja JQuery odpowiedzi @ vishnu.

if($('#testName').is(":checked")){
    $('#testNameHidden').prop('disabled', true);
}

Jeśli używasz jQuery 1.5 lub poniżej, użyj .funkcja attr () zamiast.prop()

To rozwiązanie jest inspirowane przez @desw jeden.

Jeśli nazwy wejściowe są w "stylu formularza", stracisz powiązanie indeksu tablicy z wartościami czekboxa, gdy tylko zaznaczone zostanie jedno pole, zwiększając tę" dysocjację " o jedną jednostkę za każdym razem, gdy pole czek jest zaznaczone. Może to mieć miejsce w przypadku formularza do wstawiania czegoś w rodzaju pracowników składających się z niektórych pól, na przykład:

<input type="text" name="employee[]" />
<input type="hidden" name="isSingle[] value="no" />
<input type="checkbox" name="isSingle[] value="yes" />

Jeśli wstawisz trzech pracowników na raz, a pierwszy i drugi są singlami, kończy się z 5-elementową tablicą isSingle, więc nie będziesz mógł jednocześnie iterować przez trzy tablice, aby na przykład wstawić pracowników do bazy danych.

Możesz to przezwyciężyć dzięki łatwemu przetwarzaniu tablicy. Używam PHP po stronie serwera i zrobiłem to:

$j = 0;
$areSingles = $_POST['isSingle'];
foreach($areSingles as $isSingle){
  if($isSingle=='yes'){
    unset($areSingles[$j-1]);
  }
  $j++;
}
$areSingles = array_values($areSingles);

Więc to rozwiązanie jest przesadą dla tego pytania, ale pomogło mi, gdy miałem to samo pole wyboru, które wystąpiło wiele razy dla różnych wierszy w tabeli. Musiałem znać wiersz, który reprezentuje pole wyboru, a także znać stan pola wyboru (zaznaczone/niezaznaczone).

To, co zrobiłem, to usunięcie atrybutu name z moich wejść checkbox, nadanie im WSZYSTKICH tej samej klasy i utworzenie ukrytego wejścia, które utrzymywałoby odpowiednik JSON data.

HTML

 <table id="permissions-table">
    <tr>
	<td>
	    <input type="checkbox" class="has-permission-cb" value="Jim">
	    <input type="checkbox" class="has-permission-cb" value="Bob">
	    <input type="checkbox" class="has-permission-cb" value="Suzy">
	</td>
    </tr>
 </table>
 <input type="hidden" id="has-permissions-values" name="has-permissions-values" value="">

Javascript to run on form submit

var perms = {};
$(".has-permission-checkbox").each(function(){
  var userName = this.value;
  var val = ($(this).prop("checked")) ? 1 : 0
  perms[userName] = {"hasPermission" : val};
});
$("#has-permissions-values").val(JSON.stringify(perms));

Łańcuch json zostanie przekazany w postaci $_POST ["has-permissions-values"]. W PHP dekoduj łańcuch znaków do tablicy, a będziesz miał tablicę asocjacyjną, która ma każdy wiersz i wartość true / false dla każdego odpowiedniego pola wyboru. Następnie bardzo łatwo jest przejść i porównać z aktualnymi wartościami bazy danych.

Wszystkie odpowiedzi są świetne, ale jeśli masz kilka checkboxów w formularzu o tej samej nazwie i chcesz opublikować status każdego checkboxa. Następnie rozwiązałem ten problem, umieszczając ukryte pole z checkboxem(nazwa związana z tym, co chcę).

<input type="hidden" class="checkbox_handler" name="is_admin[]" value="0" />
<input type="checkbox" name="is_admin_ck[]" value="1" />

Następnie kontroluj status zmiany checkboxa za pomocą poniższego kodu jquery:

$(documen).on("change", "input[type='checkbox']", function() {
    var checkbox_val = ( this.checked ) ? 1 : 0;
    $(this).siblings('input.checkbox_handler').val(checkbox_val);
});

Teraz przy zmianie dowolnego pola wyboru zmieni wartość powiązanego ukrytego pola. A na serwerze można szukać tylko ukrytych pól zamiast pola wyboru.

Możesz dodać ukryte elementy przed wysłaniem formularza.

$('form').submit(function() {
  $(this).find('input[type=checkbox]').each(function (i, el) {
    if(!el.checked) {
      var hidden_el = $(el).clone();
      hidden_el[0].checked = true;
      hidden_el[0].value = '0';
      hidden_el[0].type = 'hidden'
      hidden_el.insertAfter($(el));
    }
  })
});