jQuery: заставить флажки действовать как переключатели? - PullRequest
Новая
       13

jQuery: заставить флажки действовать как переключатели?

15 голосов
/ 15 января 2011

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

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

Ответы [ 11 ]

39 голосов
/ 15 января 2011 
$("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/

ОБНОВЛЕНИЕ добавлено разделение групп.

8 голосов
/ 20 апреля 2013

Обновлено для 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 голосов
/ 16 октября 2014

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

$(".make_radio").click(function(){
    $(".make_radio").not(this).attr("checked",false); 
});
3 голосов
/ 10 февраля 2014

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

    $("input:checkbox").click(function(){
        var group = "input:checkbox[name='"+$(this).prop("name")+"']";
        $(group).not(this).prop("checked",false);
    });
3 голосов
/ 15 января 2011

Возможно, вы хотите рассмотреть другой подход. Я считаю, что вы хотите, чтобы радио-кнопка была похожа на флажок. Если это так, см .: этот поиск Google

А ниже приведен упрощенный пример, который я позаимствовал у www.thecssninja.com.

Проще говоря: Вы скрываете реальную кнопку-переключатель (см. ввод css [type = radio]) и вводите метку для соответствующей кнопки-переключателя, чтобы показать пользовательский флажок (из спрайта css на фоновом изображении в input [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>
2 голосов
/ 30 сентября 2016

Обновлен скрипт (через ответ Томислава), так что вы также можете снять все флажки. Просто добавил .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/

0 голосов
/ 30 марта 2017

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

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>

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

0 голосов
/ 28 сентября 2016

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

	$("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>
0 голосов
/ 27 мая 2016

Я обновил скрипт Fiddle, 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

0 голосов
/ 20 мая 2015

Если вы выберете «$ (« 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>

$ (this) .prop («проверил», верно);});

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...