Есть ли способ сделать флажки как радиокнопки? Я предполагаю, что это можно сделать с помощью jQuery?
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
Если одно окно было проверено, остальные в группе снимут флажок.
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
});
Это будет сделано, хотя я согласен, что это может быть плохая идея.
Пример онлайн: http://jsfiddle.net/m5EuS/1/
UPDATE добавлено разделение групп.
Обновлен для JQuery 1.9, используйте .prop() вместо .attr()
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).prop("name")+"']";
$(group).prop("checked",false);
$(this).prop("checked",true);
});
Возможно, вы хотите рассмотреть другой подход. Я считаю, что вы хотите настроить переключатель, чтобы он выглядел как флажок. Если это так, см. этот поиск google
И ниже приведен упрощенный пример, который я заимствую у www.thecssninja.com.
Проще говоря: вы скрываете фактический переключатель (см. вход css [type = radio]), и вы создаете метку соответствующего переключателя для отображения пользовательского флажка (из css спрайта в фоновом изображении на входе [type = radio] + label ) и переключитесь на другой спрайт в фоновом режиме, когда переключатель находится в состоянии проверки. Пример выполнения здесь: http://jsfiddle.net/jchandra/R5LEe/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Custom CSS3 control facade</title>
<style type='text/css'>
label {
padding: 0 0 0 24px;
}
input[type=radio] {
padding:0;
margin:0;
width:16px;
height:16px;
position:absolute;
left:0;
opacity:0
}
input[type=radio] + label {
background:url(http://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat;
width:50px;
height:16px;
}
input[type=radio]:checked + label {
background-position:0 -81px;
}
</style>
</head>
<body>
Custom control images and concept from www.thecssninja.com<br/>
<br/>
<input type="radio" class="radio" value="1" name="fooby[1][]" id="r1" /><label for="r1"></label>
<input type="radio" class="radio" value="2" name="fooby[1][]" id="r2" /><label for="r2"></label>
<input type="radio" class="radio" value="3" name="fooby[1][]" id="r3" /><label for="r3"></label>
<br/>
<input type="radio" class="radio" value="1" name="fooby[2][]" id="r4" /><label for="r4"></label>
<input type="radio" class="radio" value="2" name="fooby[2][]" id="r5" /><label for="r5"></label>
<input type="radio" class="radio" value="3" name="fooby[2][]" id="r6" /><label for="r6"></label>
</body>
</html>
в основном тот же ответ, что и @amosrivera, но удалите снятие флажка по мере необходимости. вместо этого используйте .not()
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).prop("name")+"']";
$(group).not(this).prop("checked",false);
});
Я бы прокомментировал, но не имею репутации. Используйте .change, а не .click для доступности, и поэтому он работает с клавиатурой, например:
jQuery(".radio-check-box").change( function() {
var checked = jQuery(this).prop("checked");
jQuery(".radio-check-box").attr("checked", false);
jQuery(this).prop("checked", checked);
} );
Если вы примените класс к флажку, вы можете легко добиться функциональности переключателя, используя следующий фрагмент кода:
$(".make_radio").click(function(){
$(".make_radio").not(this).attr("checked",false);
});
Обновлен script (через ответ от Tomislav), чтобы вы также могли снять флажки ALL. Просто добавил .not(this) и удалил строку, в которой установлен текущий флажок.
$('form').each(function() { // iterate forms
var $this = $(this);
$this.find('input:checkbox').click(function() {
var group = 'input:checkbox[name="' + $(this).attr('name') + '"]';
$this.find(group).not(this).attr('checked', false).prop('checked', false); // also use prop, for real Property change
});
});
Если вы выберете "$ (" input: checkbox ")," выберете все флажки, чтобы вы могли указать другой переключатель с помощью своего имени.
$("[name='sname1']").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).prop("checked",false);
Ниже приведен пример
$("[name='sname1']").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).prop("checked",false);
$(this).prop("checked",true);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="border:1px solid">
<label><input type="checkbox" id="Titleblink_check" name="sname1">Blink</label>
(OR)
<label><input type="checkbox" id="Titleshine_check" name="sname1">Shine Text</label>
<br>
</div>
<label><input type="checkbox" id="id1" >Diff Check box1</label>
<br>
<label><input type="checkbox" id="id2">Diff Check box2</label>
<br>
<label><input type="checkbox" id="id3">Diff Check box3</label>
<br>Я обновил Fiddle script, jQuery отсутствовал. Теперь с prop и attr (используйте оба).
$('form').each(function() { // iterate forms
var $this = $(this);
$this.find('input:checkbox').click(function() {
var group = 'input:checkbox[name="' + $(this).attr('name') + '"]';
$this.find(group).attr('checked', false).prop('checked', false); // also use prop, for real Property change
$(this).attr('checked', true).prop('checked', true); // also use prop, for real Property change
});
});
Используйте событие изменения флажка и назначьте отмеченное значение для выбранного выбранного флажка:
$("input[type=checkbox]").change(function()
{
$("input[type=checkbox]").prop('checked',false);
$(this).prop('checked',true);
});.checkBoxb{
float:left;
clear:both;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkBoxb"><input type="checkbox" /> CheckBox1</label>
<label class="checkBoxb"><input type="checkbox" /> CheckBox2</label>
<label class="checkBoxb"><input type="checkbox" /> CheckBox3</label>
<label class="checkBoxb"><input type="checkbox" /> CheckBox4</label>Приведенное решение не заботится об исходном состоянии, которое отличается от поведения переключателей. Кроме того, он также запускает событие изменения при нажатии на уже проверенный вход.
var $elements = $('input:checkbox');
// Allow only one input to be selected
$elements.filter(':checked:not(:last)').prop('checked', false);
// Get selected input
var selected = $elements.filter(':checked')[0] || {};
// Handle event
$(document).on('click', 'input:checkbox', function(e) {
if (e.currentTarget === selected) {
e.preventDefault();
} else {
selected.checked = false;
selected = e.currentTarget;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" value="0" /> test 0</label>
<label><input type="checkbox" value="1" checked /> test 1</label>
<label><input type="checkbox" value="2" checked /> test 2</label>
<label><input type="checkbox" value="3" /> test 3</label>