javascript - 如何使用 jquery 更改复选框使其表现得像单选按钮？

Question

基本上它是一个可用性时间表日历。七个复选框具有相同的类。然后其他七个框具有相同的类。共有 49 个复选框和 7 个类。所以我希望这些复选框表现得像单选按钮。即不能同时选中同一类的两个复选框。例如，如果有人选中类为“earlyMorning”的框。当他检查具有相同类别的另一个复选框时，第一个复选框应该被取消选中。这是我的 html。现在只写 21 个复选框。

<table> <tr>
            <th>Early Morning<br /><small>6am-9am</small></th>
                <td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_871_0" value="Early Morning 6am-9am Monday" style="display: none;"></td>
                <td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_872_1" value="Early Morning 6am-9am Tuesday" style="display: none;"></td>
                <td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_873_2" value="Early Morning 6am-9am Wednesday" style="display: none;"></td>
                <td><input type="checkbox" class="lateAfternoon" name="field_807[]" id="field_874_3" value="Early Morning 6am-9am Thursday" style="display: none;"></th>
                <td><input type="checkbox" class="earlyEvening" name="field_807[]" id="field_875_4" value="Early Morning 6am-9am Friday" style="display: none;"></td>
                <td><input type="checkbox" class="lateEvening" name="field_807[]" id="field_876_5" value="Early Morning 6am-9am Saturday" style="display: none;"></td>
                <td><input type="checkbox" class="overnight" name="field_807[]" id="field_877_6" value="Overnight 12am-6am Sunday" style="display: none;"></td>
            </tr>

            <tr>
            <th>Late Morning<br /><small>9am-12pm</small></th>
                <td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_878_7" value="Late Morning 9am-12pm Monday" style="display: none;"></td>
                <td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_879_8" value="Late Morning 9am-12pm Tuesday" style="display: none;"></td>
                <td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_880_9" value="Late Morning 9am-12pm Wednesday" style="display: none;"></td>
                <td><input type="checkbox" class="lateAfternoon" name="field_807[]" id="field_881_10" value="Late Morning 9am-12pm Thursday" style="display: none;"></th>
                <td><input type="checkbox" class="earlyEvening" name="field_807[]" id="field_882_11" value="Late Morning 9am-12pm Friday" style="display: none;"></td>
                <td><input type="checkbox" class="lateEvening" name="field_807[]" id="field_883_12" value="Late Morning 9am-12pm Saturday" style="display: none;"></td>
                <td><input type="checkbox" class="overnight" name="field_807[]" id="field_884_13" value="Overnight 12am-6am Sunday" style="display: none;"></td>
            </tr>

            <tr>
            <th>Early Afternoon<br /><small>12pm-3pm</small></th>
              <td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_885_14" value="Early Afternoon 12pm-3pm Monday" style="display: none;"></td>
              <td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_886_15" value="Early Afternoon 12pm-3pm Tuesday" style="display: none;"></td>
           <td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_887_16" value="Early Afternoon 12pm-3pm Wednesday" style="display: none;"></td>
             <td><input type="checkbox" class="lateAfternoon" name="field_807[]" id="field_888_17" value="Early Afternoon 12pm-3pm Thursday" style="display: none;"></th>
               <td><input type="checkbox" class="earlyEvening" name="field_807[]" id="field_889_18" value="Early Afternoon 12pm-3pm Friday" style="display: none;"></td>
             <td><input type="checkbox" class="lateEvening" name="field_807[]" id="field_890_19" value="Early Afternoon 12pm-3pm Saturday" style="display: none;"></td>
                <td><input type="checkbox" class="overnight" name="field_807[]" id="field_891_20" value="Overnight 12am-6am Sunday" style="display: none;"></td>
            </tr></table>

我在这里找到了一个很好的例子，但它不适用于我的情况。 make checkbox behave like radio buttons with javascript

根据上面的教程，我尝试了这个但是没有用

$(".earlyMorning").each(function()
{
    $(this).change(function()
    {
        $(".earlyMorning").prop('checked',false);
        $(this).prop('checked',true);
    });
});

Answer 1

我使用 jQuery 的解决方案:

        $(document).ready(function() {
            $('input').click(function() {
                var input_class = $(this).attr('class');

                $('.'+input_class).prop('checked', false);

                $(this).prop('checked', true);
            });
        });

每次单击复选框时，在选中被单击的元素之前，所有具有相同类的复选框都会被取消选中。

希望对您有所帮助。