JSFiddle - React, Tailwind, and code Playground

by OysteinAmundsen

HTML

<div id="tickets-select">
    <table class="tickets">
        <tbody>
            <tr class="row-1">
                <td id="tickets-return" class="select col-1">
                    <label>
                        <input type="checkbox" value="1" name="ticket_type">
                        Ruter enkel, Voksen
                    </label>
                    <em class="qty">  
                        <select name="tickets-return-qty" id="tickets-return-qty">
                            <option value="1">1 stk - Kr. 28,-</option>
                        </select>
                    </em>                
                </td>
                <td class="select col-2">
                    <label>
                        <input type="radio" value="2" name="ticket_type">
                        Ruter 7 dager, Voksen
                    </label>
                </td>
                <td class="select col-3 on">
                    <label>
                        <input type="radio" checked="checked" value="3" name="ticket_type">
                        Ruter 30 dager voksen, Voksen
                    </label>
                </td>
            </tr>    
        </tbody>
    </table>
</div>

<div id='log'></div>

JavaScript

// single tickets
$("#tickets-select input[type=checkbox], #tickets-select select").change(function() {
    // Remove all radiobuttons
    // (Bug in IE7 and IE8 unchecks all the checkboxes too)
    $("#tickets-select input[type=radio]").attr('checked', false);
    
        $('#log').html('Checkbox selected: ' + $("#tickets-return input[type=checkbox]").is(':checked'));
});

    // weekly and monthly tickets
$("#tickets-select input[type=radio]").change(function() {
    // remove all checkboxes
    $("#tickets-select input[type=checkbox]").attr('checked', false);
    
    $('#log').html('Checkbox selected: ' + $("#tickets-return input[type=checkbox]").is(':checked'));
});