In html, check one checkbox from 2 checkbox without JQuery

Question

I'm having 2 checkbox. I need to check any one. I know using with Jquery, it's easy. But any default option in HTML. I'm having exactly 2 checkbox.

thanks.

code:

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

And any option to change the height and width of check box? like css.

@vinodadhikary my requirement is diff. i'm having only 2 checkbox. and i dont want Jquery. also i need some css helps. — KarSho, Jul 22 '13 at 06:56
What does `Wt` mean? Why do you have `jquery` tag in your question if you didn't want jQuery? — vee, Jul 22 '13 at 06:58
I posted with JQuery and i dont want Jquery. That's why i tagged Jquery. — KarSho, Jul 22 '13 at 07:00
Guys, Are you hearing me? Why you marked as duplicate? @vinodadhikary is the 1st person, who mark as Duplicate. But he got my point from my comments. Just review my questin... — KarSho, Jul 22 '13 at 07:56

score 2 · Answer 1 · answered Jul 22 '13 at 06:51

2

Hi in HTML use radio button.,.... simple alterantive..less code..which improves performance as well..optimized solution

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

answered Jul 22 '13 at 06:51

Arun Bertil

4,598
4
33
59

@karsho if its the rt approach dnt forget to mark as answer.. – Arun Bertil Jul 22 '13 at 06:58

score 1 · Answer 2 · answered Jul 22 '13 at 07:03

If you can use radio button which looks like checkbox. Try this..

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

score 0 · Answer 3 · answered Jul 22 '13 at 06:49

0

If you want select both check box at a time then remove name property in syntax.

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

answered Jul 22 '13 at 06:49

Amit

15,217
8
46
68

score 0 · Answer 4 · answered Jul 22 '13 at 06:51

0

CSS:

input
{
    width: xpx;
    height: xpx;
}

To check one use the attribute checked.

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

answered Jul 22 '13 at 06:51

andrewb

2,995
7
54
95

Sushanth -- · Answer 5 · 2013-07-22T07:19:21.743

This should be good enough

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

Check Fiddle

This should work no matter the number of checkboxes.

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

In html, check one checkbox from 2 checkbox without JQuery

5 Answers5