Change checkbox button "text and icon" after click html & CSS-CodePudding

I have a checkbox button with text and icon "SELECT ALL and circle icon" and I wanted to change the text and icon when checked to "SELECTED and icon circle check". I can already change the button color but I don't know how to proceed with the text and Icon. Any help would be welcome please.

Here's the HTML and CSS code below:

.select{
  margin: 4px;
  background-color: #06213B;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.select label {
  float: left; line-height: 4.0em;
  width: 26.0em; height: 4.0em;
}

.select label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.select label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

/* selects all of the text within the input element and changes the color of the text */
.select label input   span{color: #fff;
    font-size: 19px;
    font-weight: 500;
    font-family: default;
}


/* This will declare how a selected input will look giving generic properties */
.select input:checked   span {
    color: #ffffff;
    text-shadow: 0 0  0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.select input:checked   span{background-color: #78E821;}

<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/6e6e078929.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

 <div >
   <label>
      <input type="checkbox" value="1"><span><i ></i> &nbsp;SELECT ALL</span>
   </label>
</div>
  
</body>
</html>

CodePudding user response：

Link for codepen

Link for javascript adding class

Link for css content

Changing text with css:

input[type="checkbox"]   span:after{
    content: "Select all"; 
}
    
input[type="checkbox"]:checked   span:after{
    content: "Your text"; 
}

changing icon with javascript:

document.getElementById ('checkbox').addEventListener ('click', function (ev) {
    document.getElementById('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-square');
}, false);

Remove "select all" text in span from html

Add in html the id of your input <input id="checkbox"><input/> and <i id="icon"><i/>

  document.getElementById ('checkbox').addEventListener ('click', function (ev) {
    document.getElementById('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-square');
  }, false);

.select{
  margin: 4px;
  background-color: #06213B;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.select label {
  float: left; line-height: 4.0em;
  width: 26.0em; height: 4.0em;
}

.select label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.select label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

/* selects all of the text within the input element and changes the color of the text */
.select label input   span{color: #fff;
    font-size: 19px;
    font-weight: 500;
    font-family: default;
}


/* This will declare how a selected input will look giving generic properties */
.select input:checked   span {
    color: #ffffff;
    text-shadow: 0 0  0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.select input:checked   span{background-color: #78E821;}

input[type="checkbox"]   span:after{
  content: "Select all"; 
}

input[type="checkbox"]:checked   span:after{
  content: "Your text"; 
}

<script src="https://kit.fontawesome.com/d093faef8e.js"></script>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/6e6e078929.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

 <div >
   <label>
      <input type="checkbox" value="1" id="checkbox"><span><i  id="icon"></i> &nbsp;</span>
   </label>
</div>
  
</body>
</html>