JavaScript 无法识别初始复选框值

Question

我正在尝试在 JavaScript 中为 HTML 复选框创建一个切换函数，如果选中/取消选中该复选框，JavaScript 会使用 if 语句检测到该功能并相应地执行操作(在本例中，添加/删除参数url 并使用一组新结果刷新页面)

现在，我只是尝试通过在选中/取消选中该框时弹出警报来测试 javascript 切换的功能。

这是 JavaScript:

<script type="text/javascript" language="javascript">
function filterToggle(attribName)
{
  var elementII = document.getElementById(attribName);
  if(elementII.checkedTag == "unchecked"){
     elementII.checkedTag = "checked";
     alert("checked");
  }
  else {
    elementII.checkedTag = "unchecked";
    alert("unchecked");
  }
}
</script>

这里是在 php foreach 循环内多次创建复选框的地方:

$BODY .= sprintf("<input type=\"checkbox\" onclick=\"filterToggle('%s')\" name=\"%s\" value=\"%s\" id=\"%s\" checkedTag=\"unchecked\"/> %s ",
                 $attribName, $attribName, $attribClass, $attribName, $attribName, $attribName);

所以这里的想法是这些框应该在未选中的情况下加载到页面上(它们确实如此)，当我选中它们时，警报应该显示“已选中”，而当我取消选中时，警报应该显示“未选中”。这里的一切都很完美，除了，当我现在选中这些框时，它们会说“未选中”，而当我取消选中时，它们会说“已选中”。因此，JavaScript 似乎正在更改复选框中 checkTag 属性的值并做出相应响应，但是它没有认识到复选框的值最初设置为“未选中”这一事实，因此将其设置为未选中并在首次单击时提醒“未选中”(正如目前看来所做的那样)，它应该将其设置为“已选中”并提醒“已选中”。

这里有什么想法吗？我不明白为什么它不识别该初始值 - 尝试在 checkTag 值周围加双引号、单引号、不加引号...结果相同。

下面是 JSFiddle 中的一些示例输出代码 - http://jsfiddle.net/intenex/s45JC/3/ ，有 3 个复选框显示上述错误。

谢谢!

Answer 1

只需不要向不应检查的元素添加任何 checked 属性即可。

你让事情变得比实际情况复杂得多。不要添加自定义属性，而是测试 DOM 元素的 checked 属性:

示例:

HTML

<input type="checkbox" onchange="filterToggle(this)" name="Below $110" value="Price Range" id="Below$110"  />

JavaScript

function filterToggle(element) {
  if(element.checked){
     alert("checked");
  }
  else {
     alert("unchecked");
  }
}

DEMO

注意:元素 id 不能包含空格。