How can I unify text that take from multiple group radio button?

Question

My javascript code like this :

$(function(){
    $('input[type="radio"]').click(function(){
        var txt = $(this).parent().text();
        var $radio = $(this);
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
            $('#result-select').text('');
        }
        else{
            $radio.data('waschecked', true);
            $('#result-select').text(txt);
        }
        $radio.siblings('input[type="radio"]').data('waschecked', false);
    });
});

Demo and full code like this : https://jsfiddle.net/oscar11/m7by6zcw/21/

I want to :

If I select chelsea, madrid and juve the result like this :

Chelsea - Madrid - Juve

If I select chelsea and madrid the result like this :

Chelsea - Madrid

So if I check radio button, it display the text. If I uncheck radio button, it not display the text

How can I do it?

Update :

The radio button can be unchecked

For example :

If I select chelsea, madrid and juve the result like this :

Chelsea - Madrid - Juve

Then I uncheck madrid, the result like this :

Chelsea - Juve

Answer 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);

Answer 2

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 checked
        if ($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);
    });
});

Answer 3

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(' - '));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>England</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england" class="radio"> Chelsea
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england" class="radio"> Mu
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england" class="radio"> Arsenal
                </label>
            </div>
        </li>
    </ul>
</div>
<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>Spain</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain" class="radio"> Madrid
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain" class="radio"> Barcelona
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain" class="radio"> Atletico
                </label>
            </div>
        </li>
    </ul>
</div>

<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>Italy</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="italy" class="radio"> Juve
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="italy" class="radio"> Milan
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="italy" class="radio"> Inter
                </label>
            </div>
        </li>
    </ul>
</div>

<span id="result-select">Result</span>