sélecteur jQuery approprié pour les éléments html avec nom du tableau

Question

J'ai plusieurs cases à cocher dans mon code

<label> 
<input name="meta[Radio & Speakers]" class="flat" type="checkbox" value="YES"> Radio & Speakers 
</label> 

Chaque fois que les cases ne sont pas cochées, une entrée cachée est mis avant la case cochée avec le même nom en utilisant:

$('input').on('ifUnchecked', function(event){ 
    name = $(this).attr('name'); 

    if($('input[type="checkbox"][name="'+name+']"').length == 0){ 
     $(this).before('<input type="hidden" name="'+name+'" value="NO"/>'); 
    } 

}); 

Je voudrais éviter de multiples insertions de l'entrée cachée en vérifiant si elle existe en utilisant $('input[type="checkbox"][name="'+name+']"').length mais il semble à l'échec, il y a quelque chose que je suis absent ici ...

L'ajout manuel de cases à cocher masquées n'est pas réalisable pour mon scénario car elles sont nombreuses.

Answer 1

Vous devez faire comme ci-dessous: -.

1.Utilisez événement click (si le plugin à l'aide puis passez avec votre événement initial ifUnchecked)

2.Vérifier cette case est cochée ou décochée .

3.Si la case n'est pas cochée alors vérifiez que l'entrée déjà masquée est absente. Si ce n'est pas le cas, ajoutez seulement une entrée cachée.

Consultez l'extrait ci-dessous.

$(document).ready(function(){ 
 
    $('input').on('click', function(event){ //or use $('input').on('ifUnchecked', function(event){ 
 
    name = $(this).attr('name'); 
 
    if(!$(this).is(":checked")){ 
 
    if($(this).parent('label').find('input[type="hidden"]').length ==0){ 
 
     $(this).before('<input type="hidden" name="'+name+'" value="NO"/>'); 
 
    } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label><input name="meta[Radio & Speakers]" class="flat" type="checkbox" value="YES"> Radio & Speakers</label>