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而不是值来跟踪它的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')
    );
});

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

如何过滤掉哪些隐藏的表单输入类型？

1 个答案: