How Can I Unify Text That Take From Multiple Group Radio Button?

My javascript code like this : $(function(){ $('input[type='radio']').click(function(){ var txt = $(this).parent().text(); var $radio = $(this); if ($ra

Solution 1:

Updated fiddle: https://jsfiddle.net/m7by6zcw/37/

Basically like Justinas's answer but with the checking/unchecking available.

The only part I really changed was how the text was being outputted, shown below:

let output = [];
    $('input[type="radio"]:checked').each( function() {
            var txt = $(this).parent().text();
            output.push(txt);
    });
    $('#result-select').text(output.join(' - '));

You need to reset the data of everything else when something checks:

$(`input[name=${name}]:not(:checked)`).data('waschecked', false);

Solution 2:

You have to gather all values from :checked radio buttons, later use .join to convert array to string and place to results field

$(function(){
    $('input[type="radio"]').click(function(){
      var result = $('#result-select');
      var results = [];

      $('input[type="radio"]:checked').each(function () {
        results.push($(this).closest('label').text());
      });
      
      result.text(results.join(' - '));
    });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col-md-4"><ulclass="list-unstyled"><li><strong>England</strong></li><li><divclass="checkbox"><label><inputtype="radio"name="england"class="radio"> Chelsea
                </label></div></li><li><divclass="checkbox"><label><inputtype="radio"name="england"class="radio"> Mu
                </label></div></li><li><divclass="checkbox"><label><inputtype="radio"name="england"class="radio"> Arsenal
                </label></div></li></ul></div><divclass="col-md-4"><ulclass="list-unstyled"><li><strong>Spain</strong></li><li><divclass="checkbox"><label><inputtype="radio"name="spain"class="radio"> Madrid
                </label></div></li><li><divclass="checkbox"><label><inputtype="radio"name="spain"class="radio"> Barcelona
                </label></div></li><li><divclass="checkbox"><label><inputtype="radio"name="spain"class="radio"> Atletico
                </label></div></li></ul></div><divclass="col-md-4"><ulclass="list-unstyled"><li><strong>Italy</strong></li><li><divclass="checkbox"><label><inputtype="radio"name="italy"class="radio"> Juve
                </label></div></li><li><divclass="checkbox"><label><inputtype="radio"name="italy"class="radio"> Milan
                </label></div></li><li><divclass="checkbox"><label><inputtype="radio"name="italy"class="radio"> Inter
                </label></div></li></ul></div><spanid="result-select">Result</span>

Solution 3:

You need to first get the text value of the result : var str = $('#result-select').text();, then when you check a radio button, you just append the value to the result text str += txt; $('#result-select').text(str);.

And if you uncheck a radio button, you just replace it's value with an empty string str = str.replace(txt,'');.

$(function(){
    $('input[type="radio"]').click(function(){
        var txt = $(this).parent().text();
        var $radio = $(this);

        // if this was previously checkedif ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
            var str = $('#result-select').text();
            str = str.replace(txt,'');
            $('#result-select').text(str);
        }
        else{
            $radio.data('waschecked', true);
            var str = $('#result-select').text();
            str += txt;
            $('#result-select').text(str);
        }

        // remove was checked from other radios
        $radio.siblings('input[type="radio"]').data('waschecked', false);
    });
});