Wie kann ich herausfiltern, welche versteckten Formulareingabetypen gebucht werden?

Question

Ich mache eine benutzerdefinierte Checkbox-Variante, die versteckte Eingabeelemente verwendet. Mein Problem ist, dass normale Checkboxen ihren Wert nur dann auf den Server schreiben, wenn das Kontrollkästchen aktiviert ist. Diese benutzerdefinierten Kontrollkästchen geben Werte unabhängig davon an, sodass ich beim Lesen der Datenserverseite nicht wissen kann, ob das Kontrollkästchen tatsächlich aktiviert ist oder nicht.

Here is the fiddle I have used as an example

HTML:

<div class="row" id="checkboxes"> 
     <div class="col-xs-12"> 
     <div class="form-group">  
      <div class="col-md-6"> 
       <input name="checkbox1" type="hidden" value="0"/> 
       <input name="checkbox2" type="hidden" value="0"/> 
       <input name="checkbox3" type="hidden" value="0"/> 
       <div class="btn-group" data-toggle="buttons"> 
        <button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button> 
        <button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button> 
        <button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 

JavaScript:

$('.btn[data-checkbox-name]').click(function() { 
    $('input[name="'+$(this).data('checkboxName')+'"]').val(
     $(this).hasClass('active') ? 0 : 1 
    ); 
}); 

nun in dieser Angelegenheit, es tatsächlich den Wert der Checkbox verwendet, um zu signalisieren, wenn es aktiviert ist oder nicht. Ich brauche jedoch eine beliebige Anzahl von Kontrollkästchen, und ich brauche alle Kontrollkästchen, um einen bestimmten Wert anstelle eines Namens und 0/1 senden zu können. Ja, es ist für mich möglich, den Checkboxen Namen zu geben, in denen mein benötigter Wert ein Teil des Namens ist, und dann substring-interpretiere ich die Server-Seite, aber ich würde sie lieber separat für Übersicht und Einfachheit zurückgeben.

So here is my version of the code:

HTML:

<div class="row" id="checkboxes"> 
     <div class="col-xs-12"> 
     <div class="form-group">  
      <div class="col-md-6"> 
       <input name="checkbox1" type="hidden" value="A" data-value="0"/> 
       <input name="checkbox2" type="hidden" value="B" data-value="0"/> 
       <input name="checkbox3" type="hidden" value="C" data-value="0"/> 
       <div class="btn-group" data-toggle="buttons"> 
        <button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button> 
        <button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button> 
        <button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 

JavaScript:

$('.btn[data-checkbox-name]').click(function() { 
    $('input[name="'+$(this).data('checkboxName')+'"]').data("value", 
     $(this).hasClass('active') ? 0 : 1 
    ); 
}); 

Ich habe so ziemlich genau so verändert, dass es data-value statt Wert verwendet, um zu verfolgen, es 0 ist/1 Zustand, der value unverändert lässt. Aber jetzt weiß ich nicht, ob es überprüft wird oder nicht. Gibt es eine Möglichkeit, die Ergebnisse clientseitig zu filtern, bevor ich sie mit dem data-value als Filterwert sende?

Ich benutze bereits JQuery, wenn das hilft.

Answer 1

Nehmen wir an, wir verwenden AJAX nicht, keine Notwendigkeit, Dinge zu komplizieren. Wie Paul sagte, besteht der allgemeine Ansatz darin, Standard-Checkboxen zu verwenden.

<div class="row" id="checkboxes"> 
    <div class="col-xs-12"> 
     <div class="form-group">  
     <div class="col-md-6"> 
      <input name="checkbox1" type="checkbox" value="A" class="hide"/> 
      <input name="checkbox2" type="checkbox" value="B" class="hide"/> 
      <input name="checkbox3" type="checkbox" value="C" class="hide"/> 
      <div class="btn-group" data-toggle="buttons"> 
       <button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button> 
       <button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button> 
       <button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

Und

$('.btn[data-checkbox-name]').click(function() { 
    $('input[name="'+$(this).data('checkboxName')+'"]').prop('checked', 
     !$(this).hasClass('active') 
    ); 
}); 

Wenn das Formular des Standardverhalten des Kontrollkästchen vorgelegt wird beibehalten: nur die überprüften Kontrollkästchen gesendet werden.