javascript - 如何过滤掉发布的隐藏表单输入类型？

Question

我正在做一个自定义复选框变体，它使用隐藏的输入元素。我的问题是，如果选中该复选框，则普通复选框仅将其值发布到服务器。无论如何，这些自定义复选框都会发布值，因此在读取数据服务器端时，我无法知道该复选框是否实际上已选中。

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
    );
});

现在，在这个问题上，它实际上使用复选框的值来表示它是否被选中。然而，我需要任意数量的复选框，并且我需要所有复选框都能够发送特定值，而不是名称和 0/1。是的，我可以以编程方式给出复选框名称，其中我需要的值是名称的一部分，然后在服务器端对其进行子字符串解释，但为了概述和简单起见，我宁愿单独返回它们。

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
    );
});

我几乎刚刚进行了更改，以便它使用 data-value 而不是 value 来跟踪其 0/1 状态，这使得 value 保持不变。但现在我无法知道是否已检查。有没有一种方法可以在发送结果之前使用 data-value 作为过滤器值来过滤客户端结果？

我已经在使用 JQuery，如果有帮助的话。

Answer 1

假设我们不使用 AJAX，无需使事情过于复杂。正如 Paul 所说，一般方法是使用标准复选框。

<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>

还有

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

提交表单时，复选框的默认行为将被保留:仅发送选中的复选框。