Question

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

感谢。

代码：

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

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

Answer 1

你好，在HTML中使用单选按钮。，....简单的替代......无代码..它也提高了性能..优化的解决方案

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

Answer 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 */
}

Answer 3

如果要一次选中两个复选框，请在语法中删除name属性。

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

Answer 4

CSS：

input
{
    width: xpx;
    height: xpx;
}

要检查一个，请使用已检查的属性。

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

Answer 5

这应该足够了

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

<强> Check Fiddle

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

Vanilla 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

在html中，选中2复选框中的一个复选框，不带JQuery

5 个答案: