Question

我正在尝试在Javascript中为HTML复选框创建一个切换功能，如果选中/取消选中该复选框，则javascript会检测到if语句并相应地执行操作（在这种情况下，添加/删除参数使用一组新结果来网址和刷新页面）

现在，我只是试图通过在选中/取消选中此框时弹出警报来测试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正在改变复选框中checkedTag属性的值并相应地做出响应，但是它没有意识到复选框的值最初被设置为“未选中”的事实，所以相反将其设置为未选中并在第一次单击时提醒“未选中”，因为它当前正在执行，它应将其设置为“已选中”并警告“已选中”。

有什么想法吗？我无法弄清楚为什么它没有识别出初始值 - 在checkedTag值周围尝试双引号，单引号，没有引用......同样的结果。

以下是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不能包含空格。

Answer 2

http://jsfiddle.net/efortis/VqyLY/

jQuery方式

 $('input').change(function() {
   alert("Is checked? " + $(this).is(':checked'));
});

修改

这是你工作的http://jsfiddle.net/efortis/s45JC/4/

$('input').change(function() { alert("Hello... " + $(this).attr('id')); });

Answer 3

checkedTag来自哪里？它不是DOM的一部分。您应该使用checked属性。

Answer 4

确保包含var elementII = document.getElementById（element），因为元素ID与元素本身不同

function filterToggle(element){
var elementII = document.getElementById(element)
if(elementII.checked){
alert("Checked");
}
else{
alert("Unchecked");
}
}

Javascript无法识别初始复选框值

4 个答案: