Помогите решить как сделать чтобы один chekbox был включен а второй выключался?

[Fizruk]

<div class="checkbox_button">
<div class="fiz_face">
<input type="checkbox" id="box_1" >
<label for="box_1" class="checkbox-label unchecked-label"></label >
<span class="fz_uz_1">Физическое лицо</span>
</div>
<div class="ur_face">
<input type="checkbox" id="box_2" checked />
<label for="box_2" class="checkbox-label checked-label"></label>
<span class="fz_uz_2">Юридические лица</span>
</div>
</div>

 

.checkbox_button #box_1{
float:left;
min-width: 10px;
max-height:10px;
background: none;
}
.checkbox_button #box_2{
float:left;
min-width: 10px;
max-height:10px;
background: none;
}
.checkbox-label{
margin-left:-20px;
display: inline-block;
width: 23px;
height: 23px;
cursor: pointer;
}
.unchecked-label{
float: left;
margin-left:-20px;
background: url("../image/chekbox_1.png") no-repeat top left;
}
.checked-label{
float: left;
background: url("../image/chekbox_2.png") no-repeat top left;
}
.fz_uz_1{
float:left;
height: 23px;
display: table-cell;
vertical-align: middle;
margin-left: 5px;
font-weight: normal;
font-size: 18px;
}
.fz_uz_2{
float:left;
height: 23px;
display: table-cell;
vertical-align: middle;
margin-left: 5px;
font-weight: normal;
font-size: 18px;
}

 

 

 

http://joxi.ru/krDlD3zhvY3Mrp

 

 

 

 

Как сделать чтобы когда один chekbox был включен другой выключался?

 

[wwt]

http://jsfiddle.net/9r2bnsLL/

[sigma77]

http://jsfiddle.net/fainz777/9r2bnsLL/3/

А в вашем случае просто достилизовать кастомную радиокнопку.

[Fizruk]

http://jsfiddle.net/9r2bnsLL/

Спасибо всё чётко работает, только с картинками теперь не получается, я сразу не учёл этого. Как теперь лейблы подогнать чтобы соответствовали картинкам ?

http://jsfiddle.net/fainz777/9r2bnsLL/3/

А в вашем случае просто достилизовать кастомную радиокнопку.

не сработало, всё равно оба можно было включить и выключить.

http://jsfiddle.net/9r2bnsLL/

для изменения картинок использую 

$('.checkbox-label').click(function(){

if($(this).hasClass('unchecked-label'))

$(this).removeClass('unchecked-label').addClass('checked-label');

else

$(this).removeClass('checked-label').addClass('unchecked-label');

});

[wwt]

не сработало, всё равно оба можно было включить и выключить.

потому-что в примере sigma77 используются поля типа radio и свойство appearance, которое к слову работает не во всех браузерах.

 

 

А вообще что-то типо http://jsfiddle.net/9r2bnsLL/4/

Под свой дизайн вы уж сами подстраивайте.

 

А если использовать радиокнопки как подсказала sigma77 то ещё проще, скрипты вообще тогда не нужны http://jsfiddle.net/9r2bnsLL/5/

[sigma77]

не сработало, всё равно оба можно было включить и выключить.

 

У меня всё работает )

В любом случае тут нужно использовать радио, а не чекбокс. Как стилизовать его - уже не слишком принципиально.

[Fizruk]

 

не сработало, всё равно оба можно было включить и выключить.

потому-что в примере sigma77 используются поля типа radio и свойство appearance, которое к слову работает не во всех браузерах.

 

 

А вообще что-то типо http://jsfiddle.net/9r2bnsLL/4/

Под свой дизайн вы уж сами подстраивайте.

 

А если использовать радиокнопки как подсказала sigma77 то ещё проще, скрипты вообще тогда не нужны http://jsfiddle.net/9r2bnsLL/5/

 

Спасибо, работает отлично! Пример от  sigma77  тоже работает отлично! разобрался

 

не сработало, всё равно оба можно было включить и выключить.

 

У меня всё работает )

В любом случае тут нужно использовать радио, а не чекбокс. Как стилизовать его - уже не слишком принципиально.

 

Я разобрался, всё работает отлично! Спасибо большое!