如何取消選中屬性選擇的復選框

Question

我正在向 WordPress 添加一些 jscode。 我要做的是在選擇屬性時取消選中所有且僅包含在 addon.product-addon-grand-accompagnement class 中的復選框。 我努力了：

$('.product-addon.product-addon-grand-accompagnement').prop('checked', false);

$('.product-addon.product-addon-grand-accompagnement').attr('checked', false);

但沒有成功。

// works but unchecks all the checkboxes which is not what i am looking for. 
$(":checkbox").attr("checked", false);

任何幫助將不勝感激。

<div class="product-addon product-addon-grand-accompagnement checkbox" style="display: block;">
  <h3 class="addon-name">Grand Accompagnement</h3>
  <p class="form-row form-row-wide addon-wrap-4280-grand-accompagnement-2-0">
    <label>
      <input
        type="checkbox"
        class="addon addon-checkbox"
        name="addon-4280-grand-accompagnement-2[]"
        data-raw-price=""
        data-price=""
        value="grande-frite"> Grande Frite
    </label>
  </p>

  <p class="form-row form-row-wide addon-wrap-4280-grand-accompagnement-2-1">
    <label>
      <input
        type="checkbox"
        class="addon addon-checkbox"
        name="addon-4280-grand-accompagnement-2[]"
        data-raw-price=""
        data-price=""
        value="grande-patatoes"> Grande Patatoes
      </label>
  </p>
  
  <div class="clear"></div>
</div>

Answer 1

如果您使用 class 名稱取消選中，它將取消選中具有相同 class 名稱的所有類。 您必須使用唯一 ID 取消選中特定復選框。

為每個輸入標簽添加一個 id 值。

<input type="checkbox" id="id1" class="addon addon-checkbox" name="addon-4280-grand-accompagnement-2[]" data-raw-price="" data-price="" value="grande-patatoes"> 

和

<input type="checkbox" id="id2" class="addon addon-checkbox" name="addon-4280-grand-accompagnement-2[]" data-raw-price="" data-price="" value="grande-patatoes"> 

然后用#id1 或#id2 取消選中

$("#id1").prop('checked', false);