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/

我想：

如果我选择chelsea，madrid和juve结果如下：

切尔西 - 马德里 - 尤文

如果我选择chelsea和madrid结果如下：

切尔西 - 马德里

因此，如果我选中单选按钮，它会显示文本。如果我取消选中单选按钮，则不会显示文本

我该怎么做？

更新：

可以取消选中单选按钮

例如：

如果我选择chelsea，madrid和juve结果如下：

切尔西 - 马德里 - 尤文

然后我取消选中madrid，结果如下：

切尔西 - 尤文

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

更新了小提琴：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 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);
    });
});

如何统一从多个组单选按钮中获取的文本？

3 个答案: