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

Question

我的javascript代码是这样的：

$(function(){
    $('input[type="radio"]').click(function(){
        var $radio = $(this);
        var name = $(this).prop("name");

        // if this was previously checked
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
            $('#result-select').text('');
        }
        else{
            $radio.data('waschecked', true);
            $("input[name=\""+name+"\"]:not(:checked)").data('waschecked', false);
            $('#result-select').text(txt);
        }

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

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

我想：

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

切尔西 - 马德里 - 尤文

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

切尔西 - 马德里

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

切尔西 - 马德里 - 尤文 - 米兰

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

例如文字：

切尔西 - 马德里 - 尤文 - 米兰

我取消选中尤文，结果是这样的：

切尔西 - 马德里 - 米兰

在单选按钮上，它可以工作 但是在复选框上，我还是一头雾水

我该怎么做？

更新：

单选按钮可以取消选中

例如：

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

切尔西 - 马德里 - 尤文

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

切尔西 - 尤文

Answer 1

你可以这样做：

var $radioAndCheckboxInputs = $('input:radio, input:checkbox');
var $resultSelect = $('#result-select');
$radioAndCheckboxInputs.click(function () {
  var output = [];
  $radioAndCheckboxInputs.filter(':checked').each(function () {
    output.push($(this).parent().text());
  });
  $resultSelect.text(output.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="checkbox" name="italy" class="radio"> Juve
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="italy" class="radio"> Milan
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="italy" class="radio"> Inter
                </label>
            </div>
        </li>
    </ul>
</div>

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

Answer 2

这是工作代码：

 var output = [];
 var txt;
 $(function(){
 
    $('input[type="radio"]').click(function(){
       mainLogic();
    });
     $('input[type="checkbox"]').change(function(){
       mainLogic();
     });

});

function mainLogic(){
        output = [];
        txt='';
        $('input[type="radio"]:checked').each( function() {
        		txt = $(this).parent().text();
        		output.push(txt);
        });
         $('input[type="checkbox"]:checked').each( function() {
        		txt = $(this).parent().text();
        		output.push(txt);
        });
        $('#result-select').text(output.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="checkbox" name="italy" class="radio"> Juve
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="italy" class="radio"> Milan
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="italy" class="radio"> Inter
                </label>
            </div>
        </li>
    </ul>
</div>

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

Answer 3

您需要修改输入元素选择器以处理输入类型复选框和单选按钮：

$('.list-unstyled input').....

Working Demo