在html中，从没有JQuery的2个复选框中选中一个复选框[重复]答案

【问题标题】：In html, check one checkbox from 2 checkbox without JQuery [duplicate]在html中，从没有JQuery的2个复选框中选中一个复选框[重复]
【发布时间】：2013-07-20 19:51:35
【问题描述】：

我有 2 个复选框。我需要检查任何一个。我知道与Jquery, it's easy 一起使用。但是 HTML 中的任何默认选项。我正好有 2 个复选框。

谢谢。

代码：

<input type="checkbox" value="1" name="foo" />
<input type="checkbox" value="2" name="foo" />

还有任何选项可以更改复选框的高度和宽度？像css。

【问题讨论】：

@vinodadhikary 我的要求是不同的。我只有 2 个复选框。我不想要 Jquery。我也需要一些 CSS 帮助。
Wt 是什么意思？如果你不想要 jQuery，为什么你的问题中有 jquery 标签？
我用 JQuery 发布，我不想要 Jquery。这就是我标记 Jquery 的原因。
伙计们，你们听到了吗？为什么你标记为重复？ @vinodadhikary 是第一个标记为重复的人。但是他从我的cmets那里得到了我的观点。只需查看我的任务...

标签： jquery css html checkbox

【解决方案1】：

您好，在 HTML 中使用单选按钮。,....

<form action="">
<input type="radio" name="foo" value="1">
<br>
<input type="radio" name="foo" value="2">
</form>

【讨论】：

@karsho 如果它的 rt 方法不要忘记标记为答案..

【解决方案2】：

如果您可以使用看起来像复选框的单选按钮。试试这个..

HTML

<input type="radio" value="1" name="foo"  />
<input type="radio" value="2" name="foo"  />

CSS

input[type="radio"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    -ms-appearance: checkbox;     /* not currently supported */
    -o-appearance: checkbox;      /* not currently supported */
}

【讨论】：

【解决方案3】：

如果您想同时选中两个复选框，请删除语法中的 name 属性。

<input type="checkbox" value="1" />
 <input type="checkbox" value="2"/>

【讨论】：

【解决方案4】：

CSS：

input
{
    width: xpx;
    height: xpx;
}

要检查一个使用属性checked。

<input type="checkbox" value="1" name="foo" checked />

【讨论】：

【解决方案5】：

这应该够好了

var $inputs = $('input');
$('input').change(function() {
    if(this.checked)
        $inputs.not(this).prop('checked', !this.checked);
});

Check Fiddle

无论复选框的数量如何，这都应该有效。

原版 JS

var inputs = document.getElementsByTagName('input'),
    checkboxes = [];

for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type === 'checkbox') {
        checkboxes.push(inputs[i]);
        inputs[i].addEventListener('change', function () {
            if (this.checked) {
                for (var j = 0; j < checkboxes.length; j++) {
                    if (checkboxes[j] !== this) {
                        checkboxes[j].checked = false;
                    }
                }
            }
        });
    }
}

Vanilla Js Fiddle

【讨论】：