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附近和name属性）可能会给你带来麻烦。具体做法是：

id属性不能包含空格（有关有效id值的详情，请参阅此处：What are valid values for the id attribute in HTML?）
id值必须在页面中唯一
具有相同name属性的多个复选框（以及旁注，单选按钮）被视为分组（即，有点像它们是一个输入）。

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

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

旁注。。

。。。还有一些地方可以简化您的代码。。。这样做也会减少可以弹出错误的地方数量。具体做法是：

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

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

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

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

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

我认为没有任何理由会导致你所看到的问题，但我只是认为我会抛弃它来帮助降低复杂性。：）

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

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

1 个答案:

旁注。。

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

1 个答案:

旁注。 。

旁注。。