2016-05-26 3 views
0

Я создал пользовательский переключатель с помощью css. но у меня есть проблема в этом. На самом деле, когда вы выбираете переключатель, он выбирается. Но я не могу его отменить. Для создания пользовательского переключателя я создал css, как это.CSS: Отключить пользовательскую радиокнопку

input[type="radio"]:checked:before { 
content: ""; 
display: block; 
position: relative; 
top: 1px; 
left: 0px; 
width: 14px; 
height: 14px; 
border-radius: 50%; 
background: rgb(255,196,0); 
} 

и HTML код для кнопки пользовательских радио, как это ..

<div style="width:93%;height: 39px;"> 
    <div style="padding-top: 10px;width: 70%;height: 32px"><input type="radio" style="width: 15px;height: 16px"/>Wednesday</div> 
</div> 

Пожалуйста, помогите мне через это. Любая помощь будет оценена по достоинству.

+2

Прежде всего радио-кнопки не будет дис-выбор будет пара кнопок радио. –

+0

Можете ли вы описать меня, как я могу сделать это правильно? –

+0

Отверните ответ от @Alorika –

ответ

2

Вы должны указать другой radio button с тем же самым атрибутом name. Когда пользователь нажимает на radio-button, он становится проверено, а все остальные radio-buttons с equal name стали бесконтрольно

Попробуйте это:

input[type="radio"]:checked:before { 
 
content: ""; 
 
display: block; 
 
position: relative; 
 
top: 1px; 
 
left: 0px; 
 
width: 14px; 
 
height: 14px; 
 
border-radius: 50%; 
 
background: rgb(255,196,0); 
 
}
<div style="width:93%;height: 39px;"> 
 
    <div style="padding-top: 10px;width: 70%;height: 32px"> 
 
     <input type="radio" name="day" style="width: 15px;height: 16px"/>Wednesday 
 
     <input type="radio" name="day" style="width: 15px;height: 16px"/>Thursday 
 
    </div> 
 
</div>

EDIT:

Radio buttons являются используется, когда имеется список из двух или более вариантов, которые являются взаимоисключающими и пользователь должен выбрать именно один выбор. Другими словами, нажатие на не выбранную радиокнопку отменяет выбор любой другой кнопки, ранее выбранной в списке.

Checkboxes используются, когда имеются списки параметров, и пользователь может выбрать любое количество вариантов, включая ноль, один или несколько. Другими словами, каждый checkbox не зависит от всех остальных checkboxes в списке, поэтому при проверке одного окна не снимите отметку с других.

+0

Он работает нормально. Но этим я не могу выбрать несколько кнопок. @Alorika –

+1

Если вы хотите установить флажки с несколькими кнопками, зачем использовать переключатель и ожидать, что он будет работать как флажок? – RRR

+1

, либо используйте флажок и стиль, чтобы выглядеть как радиокнопка http://jsfiddle.net/xykPT/523/ – RRR

0
$(':radio').mousedown(function(e){ 
var $self = $(this); 
if($self.is(':checked')){ 
var uncheck = function(){ 
setTimeout(function(){$self.removeAttr('checked');},0); 
}; 
var unbind = function(){ 
$self.unbind('mouseup',up); 
}; 
var up = function(){ 
    uncheck(); 
    unbind(); 
}; 
$self.bind('mouseup',up); 
    $self.one('mouseout', unbind); 
} 
}); 
1

Нет проблем с кодом.

Если вы хотите радиокнопку, тогда просто укажите другую радиостанцию.

Из использования флажка для проверки и снимите

<input type="checkbox" style="width: 15px;height: 16px"/> 

Fiddle

Смежные вопросы