Toggle Checkbox Group for Both Multiple and Single Selection Options

Question

Toggle Checkbox Group for Both Multiple and Single Selection Options

Need help with a function to enable only one checkbox for single selection or multiple checkboxes for multiple selection. Use MultipleCheckbox(0) for single selection or MultipleCheckbox(1) for multiple selection.

function MultipleCheckbox(elem){
        if (elem ==0){
           $('input[type="checkbox"]').on('change', function() {
               $('input[type="checkbox"]').not(this).prop('checked', false);
            });
            } else {
             $('input[type=checkbox]').each(function() {
                 $('input[type="checkbox"]').prop('checked', false);
              });
            }
         }

<table style="text-align: center;">
  <tbody>
     <tr style="text-align: center;">
          <td>
            <input type="checkbox" id="Monday" data-day="1" name="Monday" value="1" class="big-checkbox" />
             <label for="Monday">Mon</label>
           </td>
           <td>
           <input type="checkbox" id="Tuesday" data-day="2" name="Tuesday" value="2" class="big-checkbox" />
            <label for="Tuesday">Tues</label>
           </td>
           <td>
           <input type="checkbox" id="Wednesday" data-day="3" name="Wednesday" value="3" class="big-checkbox" />
           <label for="Wednesday">Wed</label>
           </td>
           <td>
           <input type="checkbox" id="Thursday" data-day="4" name="Thursday" value="4" class="big-checkbox" />
           <label for="Thursday">Thur</label>
           </td>
           <td>
           <input type="checkbox" id="Friday" data-day="5" name="Friday" value="5" class="big-checkbox" />
           <label for="Friday">Fri</label>
          </td>
     </tr>
  </tbody>
</table>

https://i.sstatic.net/wqoHp.png

javascript html jquery css checkbox

Answer 1

Answer №1

Alright, I've got a perfect fix for your issue. Here's what you need to replace:

<div onclick="MultipleCheckbox(0);">Only Single Selection</div> 
<div onclick="MultipleCheckbox(1);">Allow Multiple Selection</div>

Simply replace it with the following code snippet:

<div id="single-checkbox">Only Single Selection</div> 
<div id="multiple-checkboxes">Allow Multiple Selection</div>

Additionally, here is the query script you should incorporate:

$(document).ready(function() {
    
    var singleCheck = true;
    var checkedIndexes = [];

    $('input[type="checkbox"]').on("change", function() {

        if(singleCheck) {
            // Implementing single selection logic
            $('input[type="checkbox"]').not(this).prop('checked', false);
        } else {
            // Handling multiple selections
            if($(this).is(':checked')) {
                    checkedIndexes.push($(this).val() - 1);
                    console.log("Multiple selections: " + checkedIndexes.length)
                    console.log($(this).val() - 1)
        } else {
       
          if(checkedIndexes.indexOf($(this).val() - 1) !== 'undefined'){
              checkedIndexes.splice(checkedIndexes.indexOf($(this).val() - 1), 1);
            }

        }

      $.each(checkedIndexes, function(i) {
        $('input[type=checkbox]').eq(checkedIndexes[i]).prop('checked', true);
      });
        }
    });


    $('#single-checkbox').on("click", function() {
        singleCheck = true;
    });

    $('#multiple-checkboxes').on('click', function() {
        singleCheck = false;
        checkedIndexes = [];
    });
});

Answer 2

Alright, I've got a perfect fix for your issue. Here's what you need to replace:

<div onclick="MultipleCheckbox(0);">Only Single Selection</div> 
<div onclick="MultipleCheckbox(1);">Allow Multiple Selection</div>

Simply replace it with the following code snippet:

<div id="single-checkbox">Only Single Selection</div> 
<div id="multiple-checkboxes">Allow Multiple Selection</div>

Additionally, here is the query script you should incorporate:

$(document).ready(function() {
    
    var singleCheck = true;
    var checkedIndexes = [];

    $('input[type="checkbox"]').on("change", function() {

        if(singleCheck) {
            // Implementing single selection logic
            $('input[type="checkbox"]').not(this).prop('checked', false);
        } else {
            // Handling multiple selections
            if($(this).is(':checked')) {
                    checkedIndexes.push($(this).val() - 1);
                    console.log("Multiple selections: " + checkedIndexes.length)
                    console.log($(this).val() - 1)
        } else {
       
          if(checkedIndexes.indexOf($(this).val() - 1) !== 'undefined'){
              checkedIndexes.splice(checkedIndexes.indexOf($(this).val() - 1), 1);
            }

        }

      $.each(checkedIndexes, function(i) {
        $('input[type=checkbox]').eq(checkedIndexes[i]).prop('checked', true);
      });
        }
    });


    $('#single-checkbox').on("click", function() {
        singleCheck = true;
    });

    $('#multiple-checkboxes').on('click', function() {
        singleCheck = false;
        checkedIndexes = [];
    });
});

Answer 3

Answer №2

$(document).ready(function() {
    
    var selectedElements = [];
    
    $('input[name="month"]').on('change', function () {
                            $('input[name="month"]').not(this).prop('checked', false);
                         });
               
                $('input:checkbox[name=day]:checked').change(function () {
            if ($("input[name='day']:checked").val() == 'one') {
               $('[type="radio"]').unbind('change');
               $('[type="radio"]').not(this).prop('checked', false);
               
               
               $('input[name="month"]').on('change', function () {
                            $('input[name="month"]').not(this).prop('checked', false);
                         });

            }
            if ($("input[name='day']:checked").val() == 'two') {
                $('[type="radio"]').not(this).prop('checked', false);
                
                $('[type="radio"]').unbind('change');
                
                $('input[name="month"]').on('change', function () {
                            
                         });
               
            }
        });        

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="day" id="sunday" value="sunday" checked/> Choose One
<input type="checkbox" name="day" id="monday" value="monday"/> Choose All

<table style="text-align: center;">
  <tbody>
     <tr style="text-align: center;">
          <td>
            <input type="radio" id="January" data-month="1" name="month" value="1" class="select-radio" />
             <label for="January">Jan</label>
           </td>
           <td>
           <input type="radio" id="February" data-month="2" name="month" value="2" class="select-radio" />
            <label for="February">Feb</label>
           </td>
           <td>
           <input type="radio" id="March" data-month="3" name="month" value="3" class="select-radio" />
           <label for="March">Mar</label>
           </td>
           <td>
           <input type="radio" id="April" data-month="4" name="month" value="4" class="select-radio" />
           <label for="April">Apr</label>
           </td>
           <td>
           <input type="radio" id="May" data-month="5" name="may" value="5" class="select-radio" />
           <label for="May">May</label>
          </td>
     </tr>
  </tbody>
</table>

Answer 4

$(document).ready(function() {
    
    var selectedElements = [];
    
    $('input[name="month"]').on('change', function () {
                            $('input[name="month"]').not(this).prop('checked', false);
                         });
               
                $('input:checkbox[name=day]:checked').change(function () {
            if ($("input[name='day']:checked").val() == 'one') {
               $('[type="radio"]').unbind('change');
               $('[type="radio"]').not(this).prop('checked', false);
               
               
               $('input[name="month"]').on('change', function () {
                            $('input[name="month"]').not(this).prop('checked', false);
                         });

            }
            if ($("input[name='day']:checked").val() == 'two') {
                $('[type="radio"]').not(this).prop('checked', false);
                
                $('[type="radio"]').unbind('change');
                
                $('input[name="month"]').on('change', function () {
                            
                         });
               
            }
        });        

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="day" id="sunday" value="sunday" checked/> Choose One
<input type="checkbox" name="day" id="monday" value="monday"/> Choose All

<table style="text-align: center;">
  <tbody>
     <tr style="text-align: center;">
          <td>
            <input type="radio" id="January" data-month="1" name="month" value="1" class="select-radio" />
             <label for="January">Jan</label>
           </td>
           <td>
           <input type="radio" id="February" data-month="2" name="month" value="2" class="select-radio" />
            <label for="February">Feb</label>
           </td>
           <td>
           <input type="radio" id="March" data-month="3" name="month" value="3" class="select-radio" />
           <label for="March">Mar</label>
           </td>
           <td>
           <input type="radio" id="April" data-month="4" name="month" value="4" class="select-radio" />
           <label for="April">Apr</label>
           </td>
           <td>
           <input type="radio" id="May" data-month="5" name="may" value="5" class="select-radio" />
           <label for="May">May</label>
          </td>
     </tr>
  </tbody>
</table>

Toggle Checkbox Group for Both Multiple and Single Selection Options

Answer №1

Answer №2

Similar questions

Ways to eliminate the default underline in MUI typography

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

Experiencing blank areas when I try to minimize the screen while using Chrome

Preserving content following the use of jQuery's fadeIn/fadeOut methods

Can functions be used as keys in a collection in JavaScript's map?

Click the link to find the JSON node that corresponds to the onclick event

What are the steps for positioning tables using HTML?

When the mandatory option is chosen, the scroll snap type acts similar to proximity by enforcing

"An issue arises where the bokeh plot fails to render when generating a

Creating a reverse progress bar in HTML and Javascript that incorporates a countdown date

The POST request encountered an error with status code 500 while being processed by the Express.js framework in the IncomingMessage

Issue with sharing on Facebook via direct URI

What is the best way to make sure the embedded object fills the entire height of the container div?

Finding a path match with Regexp using path-to-regexp

Issue with displaying Bootstrap Tooltip

Utilize CSS to display line breaks within a browser output

Nesting maps in JavaScript is a powerful way to transform

Styling div elements to match the dimensions of table rows in CSS

Applying a left margin has caused the right border to disappear

Getting the badge value of a button in Angular JS is a simple process that involves accessing