CODEWITHSUNDEEP
javascripthtmlcss
R J
R J

Reputation: 505

How to call two functions in one button but not in same click according to the value of the button?

I have a button like this below 

<input type="button" value="Select All" onclick="SelectAllCom()" id="SelAllbtn" />

here i call SelectAllCom() functions.

 function SelectAllCom() {
   btnValChange();
   selectAll();
   UnselectAll();
  }



function selectAll() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
   for (var i = 0; i < checkboxes.length; i++) {
     if (checkboxes[i].type == 'checkbox')
        checkboxes[i].checked = true;
   }
 }

 function UnselectAll() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
     for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == 'checkbox')
           checkboxes[i].checked = false;
      }
  }

 function btnValChange() {
    var btn = document.getElementById("SelAllbtn");
      if (btn.value == "Select All") {
         btn.value = "Unselect All"
   }
 else if (btn.value = "Unselect All") {
    btn.value = "Select All"
   };

}

Here i want to call the selectAll function when the btn.value == "Select All" and UnselectAll function when the btn.value == "Unselect All". Any suggestions ?

Upvotes: 2

Views: 977

Answers (6)

Spangle
Spangle

Reputation: 822

Simple solution below. Based on the value do one function, or another function.

const buttonEl = document.querySelector('.js-button');

buttonEl.addEventListener('click', function() {
  if(this.value == 'false') {
    this.value = 'true';
    selectAll();
  } else {
    this.value = 'false';
    unselectAll();
  }
});

function selectAll() {
  alert('selectAll function');
}

function unselectAll() {
  alert('unselectAll function');
}
<button value="false" class="js-button">Click Me.....</button>

Let me know if you have any questions.

Upvotes: 1

Priyadharshan
Priyadharshan

Reputation: 61

Don't call onClick in button, and no need for seperate btnValChange() function.

<input type="button" value="Select All" id="SelAllbtn" />

jquery:

$( document ).ready(function() {
    $('#SelAllbtn').click(function(event) {
        $('#SelAllbtn').val() == 'Select All' ? selectAll('Unselect All') : UnselectAll('Select All')
    });
    function selectAll(text){
        $('#SelAllbtn').val(text)
        // your code here
    }
    function UnselectAll(text){
        $('#SelAllbtn').val(text)
        // your code here
    }
});

Upvotes: 0

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

I think, no need to maintain two separate function to check and uncheck the checkbox values, you can use checkboxes[i].checked with ! sign which will assign the true if the initial value is false and vise versa!

I will merge the same code into a single function!

Here you go!

function SelectAllCom(el) {
    if (el.value == "Select All") {
        toggleCheckBox(el.value);
        el.value = "Unselect All";
    } else if (el.value == "Unselect All") {
        toggleCheckBox(el.value);
        el.value = "Select All";
    }
}

function toggleCheckBox(event) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == 'checkbox' && event == 'Select All') {
            checkboxes[i].checked = true;
        } else if (checkboxes[i].type == 'checkbox' && event == 'Unselect All') {
            checkboxes[i].checked = false;
        }
    }
}
<input type="button" value="Select All" onclick="SelectAllCom(this)" id="SelAllbtn" />

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

Upvotes: 3

Megha A.
Megha A.

Reputation: 11

You can create a common toggle function which will toggle between selectAll and unselect All. And call that function on checkbox click.For instance if checkbox is checked then value of checkbox button will become Select All and if unchecked the value of button will become Unselect All.

function handleCheckboxChange(event) {
let valueOfButton;
 if(event.target.checked) 
    valueOfButton = "Select All";
 else 
    valueOfButton = "Unselect All"; 
 toggleBetweenSelectAndUnselect(valueOfButton);
}

function toggleBetweenSelectAndUnselect (valueOfButton) {
  if(valueOfButton === 'Select All') {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox')
                checkboxes[i].checked = true;
    }
  } else if(valueOfButton === 'Unselect All') {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox')
            checkboxes[i].checked = false;
        }
 }
}

<input type="checkbox" onChange={this.handleCheckboxChange} />

Upvotes: 0

Vimal
Vimal

Reputation: 1146

Below Snippet will help you

function SelectAllCom(button) {
    var btn = document.getElementById("SelAllbtn");

       if (btn.value == "Select all" ) {
           btn.value = "Unselect All"
           selectAll();
       } else {
          btn.value = "Select all"
          UnselectAll();
       }
      }
   function selectAll() {
   alert("select all function called");
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
   for (var i = 0; i < checkboxes.length; i++) {
     if (checkboxes[i].type == 'checkbox')
        checkboxes[i].checked = true;
   }
 }

 function UnselectAll() {
    alert("Unselect all function called");

  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
     for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == 'checkbox')
           checkboxes[i].checked = false;
      }
  }
<input type="button" value="Select All" onclick="SelectAllCom(this)" id="SelAllbtn" />

Upvotes: 0

Shashank
Shashank

Reputation: 829

Try this

<input type="button" value="Select All" onclick="SelectAllCom(this)" id="SelAllbtn" />


function SelectAllCom(button) {
       if (button.value == "Select all" ) {
           button.value = "Unselect All"
           selectAll();
       } else {
          button.value = "Select all"
          UnselectAll();
       }
 }

Upvotes: 1

Related Questions