sum total value of button(clicked or selected)

by Akram kamal

HTML

<ol>
    <li>
        <div class="form-group">
            <label for="text" style="width: 100%;">Do you like soccer
                <div class="button-group">
                    <label>
                        <input name=soccer type=radio class="button danger" value="100">YES</label>
                    <label>
                        <input name=soccer type=radio class="button" value="0">NO</label>
                </div>
            </label>
            <input type="text" class="form-control" id="">
        </div>
    </li>
    <li>
        <div class="form-group">
            <label for="text" style="width: 100%;">Do you like Java?
                <div class="button-group">
                    <label>
                        <input name=Java type=radio class="button danger" value="73">YES</label>
                    <label>
                        <input name=Java type=radio class="button" value="0">NO</label>
                </div>
            </label>
            <input type="text" class="form-control" id="">
        </div>
    </li>
    <li>
        <div class="form-group">
            <label for="text" style="width: 100%;">Do you like Music
                <div class="button-group">
                    <label>
                        <input name=Music type=radio class="button danger" value="65">YES</label>
                    <label>
                        <input name=Music type=radio class="button" value="0">NO</label>
                </div>
            </label>
            <input type="text" class="form-control" id="">
        </div>
    </li>
    <li>
        <div class="form-group">
            <label for="text" style="width: 100%;">How about music
                <div class="button-group">
                    <label>
                        <input name=Music2 type=radio class="button danger" value="63">YES</label>
                    <label>
                        <input name=Music2 type=radio class="button" value="0">NO</label>
               ...

CSS

.form-group [type=radio] {
    display: none
}

label:not([for]) {
    border-radius: 3px;
    border: 1px solid red;
    padding:2px;
}

label.on {
    background: black;
    color: white
}

JavaScript

$(":radio").change(function() {
    var totalPoint = 0;
    $(":radio:checked").each(function() {
        totalPoint += +$(this).val();
    });

    $(":radio").each(function() {
        $(this).parent().toggleClass("on", this.checked)
    });

    console.log(totalPoint)
})