JQuery: сделать флажки как радиокнопки?

Есть ли способ сделать флажки как радиокнопки? Я предполагаю, что это можно сделать с помощью 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][]" />

Если одно окно было проверено, остальные в группе снимут флажок.

ОТВЕТЫ

Ответ 1

$("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 добавлено разделение групп.

Ответ 2

Обновлен для 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);
});

http://jsfiddle.net/m5EuS/585/

Ответ 3

Возможно, вы хотите рассмотреть другой подход. Я считаю, что вы хотите настроить переключатель, чтобы он выглядел как флажок. Если это так, см. этот поиск 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>

Ответ 4

в основном тот же ответ, что и @amosrivera, но удалите снятие флажка по мере необходимости. вместо этого используйте .not()

    $("input:checkbox").click(function(){
        var group = "input:checkbox[name='"+$(this).prop("name")+"']";
        $(group).not(this).prop("checked",false);
    });

Ответ 5

Я бы прокомментировал, но не имею репутации. Используйте .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);
  } );

Ответ 6

Если вы примените класс к флажку, вы можете легко добиться функциональности переключателя, используя следующий фрагмент кода:

$(".make_radio").click(function(){
    $(".make_radio").not(this).attr("checked",false); 
});

Ответ 7

Обновлен 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
  });
});

http://jsfiddle.net/kya0639w/

Ответ 8

Если вы выберете "$ (" 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>
&nbsp;&nbsp;(OR)&nbsp;&nbsp;
<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>

Ответ 9

Я обновил 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
  });
});

Fiddle

Ответ 10

Используйте событие изменения флажка и назначьте отмеченное значение для выбранного выбранного флажка:

	$("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>

Ответ 11

Приведенное решение не заботится об исходном состоянии, которое отличается от поведения переключателей. Кроме того, он также запускает событие изменения при нажатии на уже проверенный вход.

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>