SOW : Checkgroup

SOW plugins are part of Smarty Core, written from scratch!

src/js/sow.core/sow.checkgroup.js

Ajax Checkbox

Preview
HTML

Regular checkbox

Option A

Option B (with extra params)

Option C

Single checkbox

Option 1

Option 2 (with extra params)

Option 3

* Check browser console to see ajax request

Read about data-ajax-params

                  
                    <!--

                      Remove data-checkgroup-ajax-* for non-ajax
                    
                    -->
                    <div class="checkgroup" 
                        data-checkgroup-checkbox-single="false" 
                        data-checkgroup-ajax-url="../demo.files/php/demo.ajax_request.php" 
                        data-checkgroup-ajax-method="GET" 
                        data-checkgroup-ajax-params="['param1','value1']['param2','value2']" 
                        data-checkgroup-ajax-toast-success="Changes Saved!" 
                        data-checkgroup-ajax-toast-position="top-center">

                      <div class="form-check"><!-- item -->
                        <input class="form-check-input form-check-input-primary" type="checkbox" value="" id="option-1">
                        <label class="form-check-label" for="option-1">
                          Option 1
                        </label>
                      </div>

                      <div class="form-check"><!-- item -->
                        <input class="form-check-input form-check-input-primary" type="checkbox" value="" id="option-2" data-params="['optionalParam1','optionalValue1']['optionalParam2','optionalValue2']">
                        <label class="form-check-label" for="option-2">
                          Option 2 (with extra params)
                        </label>
                      </div>

                      <div class="form-check"><!-- item -->
                        <input class="form-check-input form-check-input-primary" type="checkbox" value="" id="option-3">
                        <label class="form-check-label" for="option-3">
                          Option 3
                        </label>
                      </div>

                    </div>

Item 1

Item 2

Item 3

* Open console to see ajax request

Read about data-ajax-params

                  
                    <div class="checkgroup" 
                        data-checkgroup-ajax-url="../demo.files/php/demo.ajax_request.php" 
                        data-checkgroup-ajax-method="GET" 
                        data-checkgroup-ajax-params="['param1','value1']['param2','value2']" 
                        data-checkgroup-ajax-toast-success="Changes Saved!" 
                        data-checkgroup-ajax-toast-position="top-center">

                      <div class="form-check mb-2">
                        <input class="form-check-input form-check-input-primary" type="radio" name="radio" value="1" id="radio-1" checked>
                        <label class="form-check-label" for="radio-1">
                          Item 1
                        </label>
                      </div>

                      <div class="form-check mb-2">
                        <input class="form-check-input form-check-input-primary" type="radio" name="radio" value="2" id="radio-2" data-params="['optionalParam1','optionalValue1']['optionalParam2','optionalValue2']">
                        <label class="form-check-label" for="radio-2">
                          Item 2
                        </label>
                      </div>

                      <div class="form-check mb-2">
                        <input class="form-check-input form-check-input-primary" type="radio" name="radio" value="3" id="radio-3">
                        <label class="form-check-label" for="radio-3">
                          Item 3
                        </label>
                      </div>

                    </div>