how to change font awesome of a checkbox when checkbox is checked-CodePudding

We have list of checkboxes some of them have a font awesome info icon and We tried many staff to change the icon from "fa fa-info" to "fa fa-link" on check and change it back to "fa fa-info" on uncheck. I am using Bootstar

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

HTML Code of one of the checkboxes:

<div class="col-12 col-sm-6 col-lg-4">
        <input type="hidden" name="extraOption3Title" value="Sales" />
        <label class="card d-flex flex-row p-2 mb-2 align-items-stretch openerp_enterprise_pricing_app " for="extraOption3">
          <div class="openerp_enterprise_pricing_app_icon pr-2 flex-shrink-0 flex-grow-0" style="max-width: 50px">
            <img class="img-fluid" src="pricing/icons/15.0/sale_management/static/description/icon.svg" alt="Sales" loading="lazy"/>
          </div>
          <div class="d-flex flex-column flex-grow-1 flex-shrink-0 w-50 justify-content-between openerp_enterprise_pricing_app_name">
              <div class="openerp_enterprise_pricing_app_real_name text-truncate" id="extraOption3Title">Sales</div>
              <div class="usa small">
                <b><span class="amount_to_localize"> 17.0 </span> <span class="openerp_enterprise_pricing_currency">USD</span></b> / month
              </div>
              <div class="uae small">
                <b><span class="amount_to_localize"> 15.0 </span> <span class="openerp_enterprise_pricing_currency">USD</span></b> / month
              </div>
              <div class="egypt small">
                <b><span class="amount_to_localize"> 12.0</span> <span class="openerp_enterprise_pricing_currency">USD</span></b> / month
              </div>
          </div>
          <div class="d-flex flex-column justify-content-between align-items-center">
            <input type="checkbox" class="openerp_enterprise_pricing_app_checkbox d-none" name="extraOption3" id="extraOption3" data-app-name="sale_management" data-app-depends="account" value="extraOption3"/>
            <span class="fa fa-check text-center"></span>
            <i class="o_dependencies_icon fa fa-info small" data-toggle="tooltip" data-animation="false" data-delay="0" title="Requires: Invoicing"></i>
          </div>
        </label>
      </div>

CSS Code

.fa-info:before {
   content: "\f129";
}
.openerp_enterprise_pricing_app.selected .o_dependencies_icon:before {
   content: "\f0c1";
}

Our project link: http://homey-eg.online/

Example of what we are trying to achieve: https://www.odoo.com/pricing

Please help us if there is a possible solution

CodePudding user response：

You can change className of icon based on the check state of checkbox

You can restyle according to need . Here check state is triggered when clicked on red container , you can change functionality according to need

function func() {
  var checkBox = document.getElementById("extraOption3")
  var iconChange = document.getElementById("icon")
  if (checkBox.checked) {
    checkBox.checked = false;
    iconChange.className = "fa fa-info"
  } else {
    checkBox.checked = true;
    iconChange.className = "fa fa-link"
  }
}

.d-flex {
  background-color: red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="d-flex" onclick="func()">
  <input type="checkbox" class="openerp" name="extraOption3" id="extraOption3" value="extraOption3" />
  <span class="fa fa-check text-center"></span>
  <i class="fa fa-info" id="icon"></i>
</div>

CodePudding user response：

That is my code:

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="d-flex flex-column justify-content-between align-items-center" onclick="func()">
  <input onclick="func()"
         type="checkbox"
         class="openerp_enterprise_pricing_app_checkbox d-none"
         name="extraOption3"
         id="extraOption3"
         data-app-name="sale_management"
         data-app-depends="account"
         value="extraOption3"/>
  <span class="fa fa-check text-center"></span>
  <a class="fa fa-info"
     id="icon"
     data-toggle="tooltip"
     data-animation="false"
     data-delay="0"
     title="Requires: Invoicing">
  </a>
</div>

Javascript

<script>
 function func() {
  var checkBox = document.getElementById("extraOption3")
  var iconChange = document.getElementById("icon")
  if (checkBox.checked) {
    checkBox.checked = true;
    iconChange.className = "fa fa-link"
  } else {
    checkBox.checked = false;
    iconChange.className = "fa fa-info"
  }
}
</script>