选中另一个复选框时如何取消选中复选框？答案

【问题标题】：how to uncheck checkboxes when another is checked?选中另一个复选框时如何取消选中复选框？
【发布时间】：2020-03-16 02:45:38
【问题描述】：

我有点想进入一般的编程领域，想知道如何取消选中/检查更新数组-

就像有人选中第二个复选框一样，它应该取消选中第一个选项并更新搜索（使用新数据）-我只是一个初学者，有点迷路了，所以希望任何形式的帮助

<form action="index.php" id="form1" name="form1" method="get">
    <?php $i = 0; foreach ($row_page_nav_kategorie as $row_page_nav_kategorie) { ?>
        <label class="checkbox-container">
            <input <?php if (strpos($url,$row_page_nav_kategorie['typ']) == true) {echo 'checked="checked"';}?> 
                type="checkbox" 
                class="checkmark" 
                name="hotelKategorie[]" 
                id="ckb5"
                value="<?php echo $row_page_nav_kategorie['typ']; ?>"
                onclick="kategorie(<?php echo $i ?>);" 
                onchange="submit()"/>
            <?php echo $row_page_nav_kategorie['typ']; $i++;?>
        </label>
    <?php } ?>
</form>

【问题讨论】：

您需要一些 javascript/jquery 来实现这一点。或使用单选按钮。
如果您希望某些复选框只被选中一次，您应该使用单选按钮，并且对于“如果更改更新搜索”，您将需要一些 JS
请注意：永远不要使用 inline-js。这是一种不好的做法，会导致代码难以维护，您也不应该混合使用 JS 和 PHP，因为它们的执行方式不同并且可能导致意外行为
为此使用单选按钮：它将带来更好的用户体验。用户理解单选按钮在单击时会清除其他选项，并且可以选中多个复选框。

标签： php html css mysql sql

【解决方案1】：

试试这个

HTML：

<label><input type="checkbox" name="check1" class="checkbox" /> CheckBox1</label>
<label><input type="checkbox" name="check2" class="checkbox" /> CheckBox2</label>
<label><input type="checkbox" name="check3" class="checkbox" /> CheckBox3</label>
<label><input type="checkbox" name="check4" class="checkbox" /> CheckBox4</label>

jQuery:

$(".checkbox").change(function() {
    $(".checkbox").prop('checked', false);
    $(this).prop('checked', true);
});

如果您想取消选中选中的复选框

$(".checkbox").change(function() {
    $(".checkbox").not(this).prop('checked', false);
});

希望对你有帮助，谢谢！！！

【讨论】：

【解决方案2】：

在您的页面上使用单选按钮或使用 JavaScript 在您单击一个复选框时动态取消选中其他复选框。

如果您想使用新的搜索结果动态更新页面内容，您还应该研究 AJAX，这基本上意味着您将从 JavaScript 代码调用 PHP 函数，这些函数将返回 JSON 数组，您可以利用这些数组来修改页面的 DOM。

【讨论】：

【解决方案3】：

首先欢迎加入社区！

至于你的问题，有多种方法可以解决这个问题，其中一种如下：

在 HTML 中有一个名为 radio 的属性，您可以使用 type='radio' 添加到您的输入中。在一组单选按钮中，任何时候都只能选中一个。如果您想立即提交表单，可以使用onChange='this.form.submit()' 之类的内容。这将在值更改时提交您的表单，例如按下不同的单选按钮。

需要注意的是，据我所知，onChange 属性区分大小写。您使用onchange="submit() 朝着正确的方向前进，但您的代码不知道要提交什么。 this.form.submit() 将提交元素所在的表单。

【讨论】：

【解决方案4】：

您应该使用单选按钮，但如果您想覆盖下面的代码将处理的复选框功能，我在您的输入中添加了一个通用类：

function checkboxClick(obj) {
    var cbs = document.getElementsByClassName("checkkbox-option");
    for (var i = 0; i < cbs.length; i++) {
        cbs[i].checked = false;
    }
    obj.checked = true;
}

Demo

【讨论】：