我有以下代码，其中有两个要求。
1.用户应能够选中一个复选框。如果他们选中第二个复选框，它应该取消选中第一个复选框。这对我来说是基于下面代码中显示的JS解决方案。
1.只显示与复选框相关的div，隐藏其他div。这样不行

**注意：**由于某些原因，select2（）在我下面包含的代码段中不起作用，因此它不会显示选中复选框后显示的所有div。因此，我包括一个JSFiddle link here，它工作正常，并显示了我所指的内容。因此，请参考JSFiddle链接，以了解我的问题的全貌。

为了解决上面的第2点，我想知道我是否需要切换到CSS类来更好地处理显示div和隐藏div，而不是通过jQuery .show()和.hide()方法来处理它？

//code to select only one checkbox
let boxes = document.querySelectorAll("input[type=checkbox]");
boxes.forEach(b => b.addEventListener("change", tick));
function tick(e) {
  let state = e.target.checked; // save state of changed checkbox
  boxes.forEach(b => b.checked = false); // clear all checkboxes
  e.target.checked = state; // restore state of changed checkbox
}

//Initialize select2
$("#availableLocations").select2();
$("#newLocation").select2();
$("#destinationLocation").select2();
$("#availableLocations").hide();
$("#forNewLocation").hide();
$("#retireLocationChange").hide();
$("#updateLocationChange").hide();
$("#markAsFullChange").hide();
$("#moveContentsChange").hide();

$("[name='changeLocation']").click(function() {
    if ($(this).is(":checked")) {
        $("#forNewLocation").show();
        $("#availableLocations").show();


    } else {
        $("#forNewLocation").hide();
        $("#availableLocations").hide();
    }
});

$("[name='retireLocation']").click(function() {

    if ($(this).is(":checked")) {
        $("#retireLocationChange").show();
        $("#availableRetireLocations").show();
        $("#availableRetireLocations").select2();
    } else {
        $("#retireLocationChange").hide();
        $("#availableRetireLocations").hide();
    }
});

$("[name='updateLocation']").click(function() {

    if ($(this).is(":checked")) {
        $("#updateLocationChange").show();
        $("#availableUpdateLocations").show();
        $("#availableUpdateLocations").select2();

        //Check if user selects something from the dropdown
        $("#availableUpdateLocations").change(function() {

            let locationVal = $(this).val();


        });

    } else {
        $("#updateLocationChange").hide();
        $("#availableUpdateLocations").hide();
    }
});

//mark as full
$("[name='markAsFull']").click(function() {

    if ($(this).is(":checked")) {
        $("#markAsFullChange").show();
        $("#availableMarkAsFullLocations").show();
        $("#availableMarkAsFullLocations").select2();
    } else {
        $("#markAsFullChange").hide();
        $("#availableMarkAsFullLocations").hide();
    }
});


$("#newLocation").change(function() {

    let selectedVal = $(this).val();
    $("#destinationLocation").empty();


});


/*FOR MOVE CONTENTS  */
$("[name='moveContents']").click(function() {

    console.log("Inside Move Contents");
    if ($(this).is(":checked")) {
        $("#moveContentsChange").show();
        $("#tierOneCheckBoxContents").hide();
        $("#tierTwoCheckBoxContents").hide();
        //For Tier One Selection
        $("[name='tierOneMove']").click(function() {

            if ($(this).is(":checked")) {
                console.log("Tier-I move selected");
                $("#tierOneCheckBoxContents").show();
                $("#availableTopLevelLocations").select2();
                $("#contentsInsidetopLevellocation").select2();
                $("#availableDestinationTopLevelLocations").select2();

                $("#contentsInsidetopLevellocation").empty();

                //User selects from the top level drop down ist
                $("#availableTopLevelLocations").change(function() {
                    let locationVal = $(this).val();
                    console.log(locationVal);
                    $("#contentsInsidetopLevellocation").empty();

                });

            } else {
                $("#tierOneCheckBoxContents").hide();
            }
        });


    } else {
        $("#moveContentsChange").hide();
    }
    //End: Tier One Block

    //Tier II move begins
    $("[name='tierTwoMove']").click(function() {

        if ($(this).is(":checked")) {
            console.log("Tier-II move selected");
            $("#tierTwoCheckBoxContents").show();

            $("#availableTopLevelLocationsforTierTwo").select2();
            $("#contentsInsidetopLevellocationfortiertwo").select2();
            $("#contentsInsidetopLevellocationfortiertwo").empty();
            //For multiselect 
            $("#tierThreeId").select2();
            //$('.multiple-select').multipleSelect()
            $("#availableDestinationLocationsforTierTwo").select2();
            //Empty Tier Two location
            $("#contentsInsidetopLevellocationfortiertwo").empty();
            //Empty Tier III location
            $("#tierThreeId").empty();

            //Tier-I location is selected
            $("#availableTopLevelLocationsforTierTwo").change(function() {
                let locationVal = $(this).val();
                console.log(locationVal);

                $("#contentsInsidetopLevellocationfortiertwo").empty();
                $("#tierThreeId").empty();

            });

            //Tier-II location is selected
            $("#contentsInsidetopLevellocationfortiertwo").change(function() {
                //When Tier II option is selected, popuate Tier III with its contents
                let locationVal = $(this).val();
                console.log(locationVal);

            });

            //Tier-III location is selected

        } else {
            $("#tierTwoCheckBoxContents").hide();
        }
    });



});

个字符