Радио кнопки JQuery - выбрать только одну?

Question

Это, наверное, глупо простой вопрос, но я застрял.

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

Я изменил код, чтобы заменить его на радио-кнопки, и он работает нормально за исключением для двух вещей: 1) он не переключается между радио-кнопками (каждый раз, когда я выбираю кнопку, он остается выбранным как Я выбираю другие) и 2) он добавляет в список вместо того, чтобы возвращать один выбранный вариант. Другими словами, он все еще действует как флажок, за исключением того, что визуально он круглый и имеет точку. LOL

Это мой код:

jQuery(document).ready(function($) {
        $(':radio').click(function() { 
          var radio = $(this);
          var text = $('input[name="cat"]');
          if(radio.is(':checked')) {
            text.val(text.val() + radio.val());
            //alert(text.val());
          } else {
            text.val(function() {  
                $(this).val().replace(radio.val(),"");
            });
          }
        });
    });

поэтому, когда я раскомментирую эту строку «оповещения», я вижу, что было пропущено, и она просто добавляет в список вместо того, чтобы заменить новым значением. Кто-нибудь знает, как исправить вышеперечисленное, чтобы можно было выбрать и пропустить только параметр one ? (Вышеупомянутый код работает потрясающе как флажок. Хотя на самом деле я думаю, что где-то получил вышеупомянутый код, хотя не могу вспомнить где!)

РЕДАКТИРОВАТЬ: вот код, который решает проблему и работает угощение (спасибо вам всем :)) - возможно, это поможет кому-то еще в будущем.

`jQuery(document).ready(function($) {
        $(':radio').change(function() { 
          var radio = $(this);
          var text = $('input[name="cat"]');
          if(radio.is(':checked')) {
            text.val(radio.val());
            //alert(text.val());
          } else {
            text.val(function() {  
                $(this).val().replace(radio.val(),"");
            });
          }
        });
    });`

Answer 1

Радиокнопки должны иметь одинаковый атрибут имени. Атрибут id может быть другим, но один и тот же атрибут name позволяет вам выбирать только по одному за раз.

Answer 2

Это более простой способ сделать то же самое: предположить имя радиогруппы = a

$("input[name='a']").change(function(){
    alert($(this).val());
});

Для демонстрации: http://jsfiddle.net/naveed_ahmad/AtrXw/

Answer 3

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

Ссылка

1. Когда мне следует использовать атрибут name в HTML4 / HTML5?
2. Рекомендуемые шаблоны jQuery на 2012 год?

код

   <script type="text/template" id="cardTemplate">
    <TR class=Normal>
        <TD style="WIDTH: 275px" align=left>
                <SPAN> LIJO </SPAN>
        </TD>
        <TD>
            <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionCase" value="Case" checked>Case</label>
            <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionWorkLot" value="WorkLot">WorkLot</label>
            <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionCutLot" value="CutLot">CutLot</label>
            <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionMoonrock" value="Moonrock">Moonrock</label>
        </TD>
     </TR>
   </script>

 $(document).ready(function () 
 {

        //Add Scan Type radio buttons as a table row  
        var cardTemplate = $("#cardTemplate").html();        
        $('#tblPlantParameters tr:last').after(cardTemplate);

        //When Scan Type radio button selection change, set value in hidden field
        $('input[name=defaultScanOption]:radio').change(function()
        {
            var selectedOptionValue = $(this).val();
            alert(selectedOptionValue);
            $('#hidSelectedScanOption').val(selectedOptionValue);
        });     


        //Set the Scan Type radio button if it has a value other than default
        var existingDefaultScanType = document.getElementById('hidExistingScanOption').value;
        alert(existingDefaultScanType);
        if(existingDefaultScanType != null && existingDefaultScanType != "")
        {
            $("input[name=defaultScanOption][value="+existingDefaultScanType+"]").attr('checked', true);
        } 
 });

Answer 4

Я думаю, это то, что вы хотите:

jQuery(document).ready(function($) {
    $(':radio').click(function() { 
      var radio = $(this);
      var text = $('input[name="cat"]');
      removeRadioValues()
      text.val(text.val()+radio.val());
    });
});
function removeRadioValues(){
    var tf = $('input[name="cat"]');
    var text = tf.val()
    $(':radio').each(function(){
        text = text.replace($(this).val(),'');
    });
    tf.val(text);
}

Answer 5

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

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

Answer 6

Ну, вы устанавливаете значение элемента «текст» на его текущее значение плюс значение выбранного переключателя. Чтобы избавиться от предыдущего значения переключателя, вам нужно будет либо удалить его на основе некоторого шаблона, либо спрятать оригинальное значение ввода текста где-нибудь, чтобы вы могли восстановить его.

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