make checkbox behave like radio buttons with javascript
I need to manipulate the behavior of the check boxes with javascript. They should basically behave like radio buttons (only one selectable at a time, plus unselect any previous selections). The problem is that I can’t use plain radio buttons in first place, because the name attribute for each radio button would be different. I know its not the ultimate and shiniest solutions to make an apple look like a pear, and w3c wouldn’t give me their thumbs for it, but it would be a better solution right now than to change the core php logic of the entire cms structure 😉 Any help is much appreciated!
Are you using a framework such (e.g. jQuery) or not. I would not tell you to add jQuery or any other framework to your project for a simple task such as this one, unless you’re using one.
12 Answers 12
if you want user can unchecked selected item :
nice fiddle, + if you want to uncheck the checkbox again (this code is almost perfect except not allowing unchecking all) add this: if($(this).attr(‘checked’))
can be simplified to $(«.chb»).change(function() , rather than $(«.chb»).each(function()< $(this).change(function() , but nice.
Wow thanks for answering back. Just checked again — it’s not working for me. The checkboxes are working like regular checkboxes — not radios. You sure it’s working for you?? I have since found another solution. Thanks
There are many ways to do this. This is a clickhandler (plain js) for a div containing a number of checkboxes:
function cbclick(e) < e = e || event; var cb = e.srcElement || e.target; if (cb.type !== 'checkbox') var cbxs = document.getElementById('radiocb') .getElementsByTagName('input'), i = cbxs.length; while(i--) < if (cbxs[i].type && cbxs[i].type == 'checkbox' && cbxs[i].id !== cb.id) < cbxs[i].checked = false; >> > This is a better option as it allows unchecking also:
Just in case it helps someone else
I was having the same situation where my client needed to have a checkbox behaving like a radio button . But to me it was meaningless to use a checkbox and make it act like radio button and it was very complex for me as I was using so many checkboxes in a GridView Control.
My Solution:
So, I styled a radio button look like a checkbox and took the help of grouping of radio buttons.
@DJafari’s answer doesn’t let unchecking the checkbox. So I’ve updated it like this:
You could give the group of checkboxes you need to behave like this a common class, then use the class to attach the following event handler:
function clickReset () < var isChecked = false, clicked = $(this), set = $('.' + clicked.attr ('class') + ':checked').not (clicked); if (isChecked = clicked.attr ('checked')) < set.attr ('checked', false); >return true; > $(function () < $('.test').click (clickReset); >); Note: This is pretty me just shooting from the hip, I’ve not tested this and it might need tweaking to work.
I would advise that you do look into finding a way of doing this with radio buttons if you can, as radios are the proper tool for the job. Users expect checkboxes to behave like checkboxes, not radios, and if they turn javascript off they can force through input into the server side script that you weren’t expecting.
EDIT: Fixed function so that uncheck works properly and added a JS Fiddle link.
Как сделать что бы переключатель «checkbox» видел «value» как «radio»? [закрыт]
Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.
Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.
var but = document.forms.burger.elements.order; var sizeBurger =document.forms.burger.elements.sizeBurger; var stuff =document.forms.burger.elements.stuff; but.addEventListener('click',function()< console.log(sizeBurger.value) console.log(stuff.value) >) 3 ответа 3
radio имеет одно значение, в отличии от checkbox , поэтому его стоит проверять иным способом:
var but = document.forms.burger.elements.order; var sizeBurger =document.forms.burger.elements.sizeBurger; var stuff =document.forms.burger.elements.stuff; but.addEventListener('click',function() < console.log(sizeBurger.value) for(var i in stuff)< if(stuff.hasOwnProperty(i))< console.log(stuff[i].value, stuff[i].checked) >> >) Простая кастомизация Checkbox и Radio
Кастомизация элементов форм наверное одно из самых увлекательных занятий в Веб-дизайне. Оправданное ли это занятие решает каждый для себя сам, хотя очевидно, что в наше время дизайнеры и верстальщики все же уделяют этому свои силы и время.
К сожалению, одного только CSS частенько не достаточно, чтобы с легкостью оформить тот или иной элемент формы. Наверное поэтому многие используют штуки вроде Uniform для своих форм. Лично я всегда стараюсь сократить количество Javascript, используемого в подобных целях, поэтому хочу рассказать о совершенно нативном HTML+CSS методе кастомизации радио-кнопок и чекбоксов.
Уверен, что на большая часть специалистов на Хабре, применяют схожие методы, для тех же, кто использует js-библиотеки, вроде Uniform, надеюсь будет полезной эта статья.
Поехали!
Итак, сразу поставим цель: оформить чекбоксы и радио-кнопки, чтобы внешне они были похожи на js-магию Uniform, но сделать это максимально простым, нативным по отношению в HTML и CSS способом, а также избежать применения лишних тегов, сохраняя семантику. Как-то так.
Основная идея строится на нативном «умении» HTML тега label устанавливать связь с определенным элементом формы. Собственно и все, дальше только код.
Разметка
Совершенно нативная разметка. Использование label вместе с input прям как из учебников. Важным моментом является только то, что нужно указывать id для каждого input и for для label, чтобы связать их.
Думаю все заметили использование атрибута hidden, который скрывает сами input элементы, однако благодаря связи с label, мы все еще может манипулировать ими. В результате мы получаем что-то вроде:
Скучно совсем стало, но все работает. Теперь осталось оформить все это добро как надо. Для этого воспользуемся спрайтом, который применяется на сайте Uniform.
Оформление
input [ type = «checkbox» ] ,
input [ type = «radio» ] <
display : none ;
>
input [ type = «checkbox» ] + label ,
input [ type = «radio» ] + label <
font : 18px bold ;
color : #444 ;
cursor : pointer ;
>
input [ type = «checkbox» ] + label : :before ,
input [ type = «radio» ] + label : :before <
content : «» ;
display : inline- block ;
height : 18px ;
width : 18px ;
margin : 0 5px 0 0 ;
background-image : url ( uniformjs.com/images/sprite.png ) ;
background-repeat : no-repeat ;
>
input [ type = «checkbox» ] + label : :before <
background-position : -38px -260px ;
>
input [ type = «radio» ] + label : :before <
background-position : 0px -279px ;
>
input [ type = «checkbox» ] :checked + label : :before <
background-position : -114px -260px ;
>
input [ type = «radio» ] :checked + label : :before <
background-position : -108px -279px ;
>
input [ type = «checkbox» ] :disabled + label : :before <
background-position : -152px -260px ;
>
input [ type = «checkbox» ] :checked :disabled + label : :before <
background-position : -171px -260px ;
>
input [ type = «radio» ] :disabled + label : :before <
background-position : -144px -279px ;
>
input [ type = «radio» ] :checked :disabled + label : :before <
background-position : -162px -279px ;
>
Тут все так же максимально просто. Используем псевдо-элемент before для того, чтобы показывать наши «виртуальные контролы» и пользователь не заметил подмены. Части спрайта, меняем в зависимости от состояния input‘а.
В результате получаем что-то вроде:
Выгода использования подобного подхода по сравнению с тем же Uniform очевидна. Никаких javascript для оформления, никаких лишних тегов, более простая, правильная и семантичная разметка. Такой же способ можно использовать для придания данным элементам более причудливых форм. К примеру, без проблем можно заделать чекбоксы в стиле iPhone не применяя при этом javascript.
Надеюсь для статья будет полезна начинающим верстальщикам и остановит их о использования js-костылей для подобных целей. Спасибо за внимание!
UPD: Как было отмечено уважаемым SelenIT2 данный способ вероятно не будет работать в браузере Safari под платформу iOS из-за досадной ошибки в поддержке html спецификации (ссылка).