mardi 10 décembre 2019

Checking current checked boxes

I am attempting to make it so upon click it checks three rules as follows:

  1. If everything is unchecked check the "All" checkbox.

  2. If "All" checkbox is seleceted then uncheck everything else.

  3. If a console is checked (at least one of them) then do neither of the above.

Unfortunately it only loops through once and stops working and never fills any of the other requirements. Could someone inform me what I am missing?

Thank you for your assistance.

$('#platform-container').click(function() {
        if((`input[type=checkbox][name=platform]:checked`).length > 0){
                $('#platform-all').attr("checked", status)
        }
        else if($('#platform-all').is(':checked')){
                $('.single').attr("unchecked", status)
        }
        else{
                $('.single').is(':checked')
        }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-styles platforms-list">
  <button id="platform-button" class="button">
                                        Platforms
                                </button>
  <form id="platform-container" class="param-container">
    <div class="checkbox-container">
      <input type="checkbox" id="platform-all" class="platform" name="platform" value="4,18,1,5,6,7,8" />
      <label for="platform">All</label
                        >
                    </div>

                                        <div class="checkbox-container">
                                                <input
                                                        type="checkbox"
                                                        id="platform-switch"
                                                        class="single platform"
                                                        name="platform"
                            value="7"
                                                                                checked="true"
                                                />
                                                <label for="platform-switch"
                                                        >Nintendo Switch</label
                                                >
                                        </div>

                                        <div class="checkbox-container">
                                                <input
                                                        type="checkbox"
                                                        id="platform-ps4"
                                                        class="single platform"
                                                        name="platform"
                                                        value="18"
                                                />
                                                <label for="platform-ps4"
                                                        >Playstation 4</label
                                                >
                                        </div>

                                        <div class="checkbox-container">
                                                <input
                                                        type="checkbox"
                                                        id="platform-xb1"
                                                        class="single platform"
                                                        name="platform"
                                                        value="1"
                                                />
                                                <label for="platform-xb1"
                                                        >Xbox One</label
                                                >
                                        </div>

                                        <div class="checkbox-container">
                                                <input
                                                        type="checkbox"
                                                        id="platform-3ds"
                                                        class="single platform"
                                                        name="platform"
                                                        value="8"
                                                />
                                                <label for="platform-3ds"
                                                        >Nintendo 3DS</label
                                                >
                                        </div>

                                        <div class="checkbox-container">
                                                <input
                                                        type="checkbox"
                                                        id="platform-pcMasterRace"
                                                        class="single platform"
                                                        name="platform"
                                                        value="4"
                                                />
                                                <label for="platform-pc"
                                                        >PC</label
                                                >
                                        </div>

                    <div class="checkbox-container">
                                        <input
                                                type="checkbox"
                                                id="platform-linux"
                                                class="single platform"
                                                name="platform"
                                                value="6"
                                        />
                                        <label for="platform-linux"
                                                >Linux</label
                    >
                    </div>

                    <div class="checkbox-container">
                                        <input
                                                type="checkbox"
                                                id="platform-mac"
                                                class="single platform"
                                                name="platform"
                                                value="5"
                                        />
                                        <label for="platform-mac">Mac</label>
  </form>
  </div>



Aucun commentaire:

Enregistrer un commentaire