選中復選框時如何更改復選框的字體真棒

我們有復選框串列，其中一些有字體很棒的資訊圖示，我們嘗試了許多員工在檢查時將圖示從“fa fa-info”更改為“fa fa-link”并將其更改回“fa fa-info”在取消選中。我正在使用 Bootstar

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

復選框之一的 HTML 代碼：

<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 代碼

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

我們的專案鏈接：http : //homey-eg.online/

我們正在努力實作的示例：https : //www.odoo.com/pricing

如果有可能的解決方案，請幫助我們

uj5u.com熱心網友回復：

您可以根據檢查狀態更改圖示的 className checkbox

您可以根據需要重新設計。這里的check狀態是在點擊紅色容器時觸發的，您可以根據需要更改功能

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>

uj5u.com熱心網友回復：

那是我的代碼：

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>

標籤：javascript html 查询 css

上一篇：選中或懸停無線電時更改無線電容器的樣式

下一篇：使用帶有ajax的復選框來更新資料庫