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

Question

My javascript code like this :

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


        

Answer 1

You need to modify the input element selector to handle both input types checkboxes and radio buttons:

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

Working Demo

Answer 2

You can do:

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 3

Here is the working code:

 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>