如何统一来自多个组单选按钮的文本？

Question

我的javascript代码是这样的：

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

演示和完整代码如下：https://jsfiddle.net/oscar11/m7by6zcw/21/

我想：

如果我选择切尔西、马德里和尤文，结果是这样的：

切尔西 - 马德里 - 尤文

如果我选择切尔西和马德里，结果如下：

切尔西 - 马德里

所以如果我选中单选按钮，它会显示文本。如果我取消选中单选按钮，它不会显示文本

我该怎么做？

更新：

单选按钮可以取消选中

例如：

如果我选择切尔西、马德里和尤文，结果是这样的：

切尔西 - 马德里 - 尤文

然后我取消选中马德里，结果是这样的：

切尔西 - 尤文

Answer 1

更新小提琴：https://jsfiddle.net/m7by6zcw/37/

基本上像 Justinas 的回答，但可以选择/取消选择。

我真正改变的唯一部分是文本的输出方式，如下所示：

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

检查时需要重置其他所有数据：

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

Answer 2

您必须从:checked 单选按钮收集所有值，稍后使用.join 将数组转换为字符串并放置到结果字段

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

Answer 3

您需要首先获取结果的文本值：var str = $('#result-select').text();，然后当您选中单选按钮时，只需将该值附加到结果文本str += txt; $('#result-select').text(str);。

如果取消选中单选按钮，只需将其值替换为空字符串 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);
    });
});