Question

我正在使用Foundation 4框架，并在页面中添加了自定义表单。

HTML：

<label for="checkbox2">
<input type="checkbox" id="checkbox2" style="display: none;">
<span class="custom checkbox"></span> <p> CHECKBOX TEST</p>
</label>

JS：

if($('#checkbox2').is(":checked")){
   isnewsletter = 1;
} else {
   isnewsletter = 0;
}

甚至这个

newsletter = $('#checkbox2').val(),

无效。
如果选中我的复选框，我该如何查看？

Answer 1

$('#checkbox2').change(function(){
  if($(this).is(":checked")){
     console.log(1);
  } else {
     console.log(0);
  }
});

Answer 2

首先检查工作正常。如果您在checked="checked"复选框中添加isnewsletter，则会1 附：您没有提及在程序中勾选复选框的任何其他方式。您的复选框未显示在页面上，因此您无法手动勾选它。

Answer 3

问题还不是很清楚OP是否要检查复选框是否：在变更时检查，在页面上交互期间的任何随机时刻，或使用Foundation 4 Abide库进行验证。我遇到了自定义窗体和切换隐藏字段的问题，以及验证隐藏字段，自定义窗体没有帮助。但是，我已经解决了这个问题，但这些是不同的问题。

默认情况下，“自定义”表单会隐藏输入并在其后创建一个“检查”类的范围，并且隐藏复选框上的属性不会在Chrome的开发人员工具栏中直观显示（我没有检查过） FireBug以查看该属性是否出现）。但是，如果您编写基于代码的复选框属性检查，它将返回'true'：

$("#checkbox2").change(function() {
    console.log($(this).is(":checked"));
    console.log($(this).prop('checked'));
    // set up if using either method above, your choice.
    if( $(this).prop('checked')) {
        // do stuff
    }
});

或者您可以在“已选中”类的输入后直接检查span.checkbox.custom：

$("#checkbox2").change(function() {
    console.log($(this).next().hasClass("checked"));
    // set up if statement using that logic above:
    if($(this).next().hasClass("checked") ) {
        // do stuff
    }
});

使用相同的逻辑来检查是否在任何时候选中了复选框，只是不要打扰.change（）函数。如果选中此框，它们将返回true：

$("#checkbox2").next().hasClass("checked");
$("#checkbox2").is(":checked");
$("#checkbox2").prop("checked");

基金会4没有内置于Abide的验证，你必须将其添加进去。

这需要调整Abide。

我回答了这个问题here。

基础复选框值错误

3 个答案: