Jquery複選框僅在第一次點擊時有效

Question

我正在構建一個系統，其中複選框輸入實際上是一個圖像，因此要選中該複選框，用戶必須單擊該標籤（圖像將是一部分）。

我已經用Jquery寫了一個Javascript代碼，它起初可以工作，但如果用戶取消選中並想再次檢查，這是一個糟糕的事情。請嘗試一下，你會更容易理解它。

我不能共享系統，所以我只在下面放了必要的部分（沒有圖像，只是上面描述的問題 - 注意用戶只能點擊我係統上的標籤而不是複選框本身） 。

我的Javascript/jquery技能仍然非常開始，所以對於可怕的代碼很抱歉。謝謝你的幫助！

$(document).ready(function() { 
 
    $('.negociacao').on('click', 'label', function() { 
 

 
     $(this).closest('div').find('.tatica').prop("checked", true); 
 

 
     if ($(this).closest('div').find('.tatica').checked = true) { 
 
      $('.negociacao').on('click', 'label', function() { 
 
       $(this).closest('div').find('.tatica').prop("checked", false); 
 
      }) 
 
     } 
 
    }) 
 
})

.negociacao label { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    position: relative; 
 
    padding-left: 25px; 
 
    margin-right: 15px; 
 
    z-index: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="negociacao"> 
 
    <form method="post"> 
 
     <fieldset> 
 
      <div> 
 
       <input type="checkbox" class="tatica" value="ana_est"> 
 
       <label id="ana_est">Análise Estratégica</label> 
 
       <br> 
 
      </div> 
 
      <div> 
 
       <input type="checkbox" class="tatica" value="cat_com"> 
 
       <label id="cat_com">Catálogo de Compras</label> 
 
       <br> 
 
      </div> 
 
      <div> 
 
       <input type="checkbox" class="tatica" value="com_cen"> 
 
       <label id="com_cen">Compras Centralizadas</label> 
 
       <br> 
 
      </div> 
 
      <div> 
 
       <input type="checkbox" class="tatica" value="com_spo"> 
 
       <label id="com_spo">Compras Spot</label> 
 
       <br> 
 
      </div> 
 
      <div> 
 
       <input type="checkbox" class="tatica" value="con_cur"> 
 
       <label id="con_cur">Contrato Curto Prazo</label> 
 
       <br> 
 
      </div> 
 
      <div> 
 
       <input type="checkbox" class="tatica" value="ges_con"> 
 
       <label id="ges_con">Gestão de Contratos</label> 
 
       <br> 
 
      </div> 
 
      <div> 
 
       <input type="checkbox" class="tatica" value="ges_ris"> 
 
       <label id="ges_ris">Gestão de Risco de Fortalecimento</label> 
 
       <br> 
 
      </div> 
 
      <div> 
 
       <input type="checkbox" class="tatica" value="pad_esp"> 
 
       <label id="pad_esp">Padronização das Especificações</label> 
 
       <br> 
 
      </div> 
 
      <div> 
 
       <input type="checkbox" class="tatica" value="sou_ppu"> 
 
       <label id="sou_ppu">S. Sourcing - PPU</label> 
 
       <br> 
 
      </div> 
 
      <div> 
 
       <input type="checkbox" class="tatica" value="sou_tca"> 
 
       <label id="sou_tca">S. Sourcing - TCA</label> 
 
       <br> 
 
      </div> 
 
     </fieldset> 
 
    </form> 
 
</div>

Answer 1

您有一個分配=時，你的意思是用==比較：

if ($(this).closest('div').find('.tatica').checked = true 

應該

if ($(this).closest('div').find('.tatica').checked == true) 

或只是

if ($(this).closest('div').find('.tatica').checked) 

但是，因爲您剛剛在前一行中設置了該代碼，所以它始終是true。

下一個問題是嵌套點擊處理程序。你只是不這樣做。

整個問題可以被簡化爲以下：

$(document).ready(function() { 
    $('.negociacao').on('click', 'label', function() { 
     // Find the associated checkbox 
     var $check = $(this).closest('div').find('.tatica'); 
     // Toggle the checked on/off 
     $check.prop("checked", !$check.prop("checked")); 
    }) 
})