基础复选框值错误答案

【问题标题】：Foundation checkbox value error基础复选框值错误
【发布时间】：2013-07-30 21:45:17
【问题描述】：

我正在使用 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(),

不工作。
如果我的复选框被选中，我该如何检查？

【问题讨论】：

这是一个 $.ajax({});张贴。在数据中我正在这样做{时事通讯：isnewsletter，.....}

标签： javascript checkbox zurb-foundation

【解决方案1】：

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

【讨论】：

【解决方案2】：

第一次检查工作正常。如果您将checked="checked" 添加到您的复选框中，isnewsletter 将是1。
附言您没有提及如何在程序中勾选复选框的任何其他方式。您的复选框未显示在页面上，因此您无法手动勾选。

【讨论】：

【解决方案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
    }
});

或者你可以在输入“checked”类之后直接检查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");

Foundation 4 没有在 Abide 中内置验证，您必须将其添加进去。

这需要调整Abide。

我回答了这个问题here。

【讨论】：