保持多个具有相同名称的复选框的复选框状态

Question

我有一个由 ajax 生成的内容页面，并用一排复选框进行组织。单击任一复选框会将参数传递到 URL，该参数用于创建 SQL 查询。我想将复选框添加到页面的另一部分，但是当我这样做时，我无法保持复选框的样式（有一个用于选中和未选中状态的自定义样式）。单击任一行复选框将正确组织数据，但只有一行复选框会显示选中/选中状态。

我正在使用以下代码来设置复选框的样式：

$(':checkbox').change(function() {
    if($(this).is(":checked")) {
        $(this).next('label').children('div').removeClass("sort-not-active").addClass("sort-active");
    }
    else {
        $(this).next('label').children('div').removeClass("sort-active").addClass("sort-not-active");
    }
});

我的复选框的 HTML 如下。我认为我的样式问题可能是由于我将变量作为 ID 而不是类传递的，但是每当我删除 ID 时，复选框就会完全停止工作。

<?php foreach (array_unique($disciplines) as $discipline): ?>
    <input class="disciplinechecks" type="checkbox" id="<?php echo $discipline; ?>" name="<?php echo $discipline; ?>" value="<?php echo $discipline; ?>" onChange="checkBoxChange(this.checked,'<?php echo $discipline; ?>');">
    <label for="<?php echo $discipline; ?>">
        <div class="sort-genre sort-active"><?php echo $discipline; ?></div>
        <span></span>
    </label>
<?php endforeach ?>

下面是我用来将值传递到 URL 的函数。这里没有引用 ID，所以我不知道为什么从我的复选框中删除 ID 会破坏它：

var typeItemsChecked = Array( ALL OF THE $DISCIPLINE VALUES ARE HERE );

function checkBoxChange(x,y) {
    if(x){
        var type = y;
        typeItemsChecked.push(type);
        showUser();
    }
    else {
        var type = y;
        typeItemsChecked.remove(type);
        showUser();
    }
}

function getURLString() {
    joinedTypeItemsChecked = typeItemsChecked.join();
    var queryString = [
        ("d="+joinedTypeItemsChecked)
    ];

    var url = queryString.join("&");
    return url;
}

这是 PHP 之后 HTML 的样子

<input class="disciplinechecks" type="checkbox" id="Web Design" name="Web Design" value="Web Design" onChange="checkBoxChange(this.checked,'Web Design');">
<label for="Web Design">
    <div class="sort-genre sort-active">Web Design</div>
    <span></span>
</label>

<input class="disciplinechecks" type="checkbox" id="Print Design" name="Print Design" value="Print Design" onChange="checkBoxChange(this.checked,'Print Design');">
<label for="Print Design">
    <div class="sort-genre sort-active">Print Design</div>
    <span></span>
</label>

Answer 1

好的，所以，在阅读了您的评论回复后，您的原始帖子中的任何内容都不会立即引起我的注意，但是您的“已处理”代码存在一些问题（尤其是在 id 和 @ 987654323@ 属性）可能会给您带来麻烦。具体来说：

1. id 属性不能包含空格（有关有效id 值的更多信息，请参见此处：What are valid values for the id attribute in HTML?）

2. id 值在页面内必须是唯一的

3. 具有相同name 属性的多个复选框（以及在旁注中的单选按钮）被认为是分组的（即，有点像它们是一个输入）。

现在，浏览器通常对这些事情非常宽容，但脚本语言可能会变得非常混乱。因此，在您进一步调试之前，我建议您将 PHP 更新为：

• 在分配id 属性时，去除$discipline 值中的所有空格。虽然name 属性可以有空格，但作为一般做法，我也会避免在其中使用它们。
• 使用某种索引值（或类似的值）来区分两组复选框之间的id 和name 值。

---

在旁注。 . .

。 . .还有几个地方可以简化代码。 . .这样做也将减少可能出现错误的地方的数量。具体来说：

在样式的 JS 代码中，试试这个：

$(':checkbox').change(function() {
    $(this).next().children('div').toggleClass("sort-not-active sort-active");
});

• 无需在next() 调用中指定'label'，因为它始终是复选框的下一个兄弟
• 如果默认类设置正确，那么您只需在复选框更改时切换两个类。由于复选框只能处于两种状态，因此类组合只能处于两种状态。

对于捕获复选框的代码，您可以将其简化为：

function checkBoxChange(x,y) {
    if (x) {
        typeItemsChecked.push(y);
    }
    else {
        typeItemsChecked.remove(y);
    }
    showUser();
}

我看不出这会导致您所看到的问题的任何原因，但我只是认为我会放弃它以帮助稍微降低复杂性。 :)

---

所以，我不保证其中的任何一个都能解决您所看到的问题（实际上，仅将您的原始 JS 用于样式和您提供的 HTML 示例，一切对我来说都很好Firefox），但我确实知道某些浏览器和脚本语言可能非常注重不遵循正确的 HTML 规则。尝试解决其中一些问题，看看您看到的问题是否会消失。如果没有，我们可以使用您的新代码重试。