Select 只有一個復選框 HTML

Question

我只檢查一個復選框時遇到問題...我嘗試了兩種類型的 JS 代碼..但它不起作用...要通過 class 檢查，當您單擊帶有 class 'product-list' 的一個元素以取消選擇時另一個...有人知道如何解決這個問題嗎？

HTML：

<div class="mg-toolbar">
  <div class="mg-option checkbox-custom checkbox-inline">
    <input class="product-list" type="checkbox" name="PDF" value="<?php echo $file_name; ?>">
    <label for="file_1">SELECT</label>
  </div>
</div>

JS 嘗試 1：

<script type="text/javascript">
   $('.product-list').click(function() {
     $(this).siblings('input:checkbox').prop('checked', false);
   );
</script>

JS 嘗試 2：

<script type="text/javascript">
   $('.product-list').on('change', function() {
     $('.product-list').not(this).prop('checked', false);  
   });
</script>

Answer 1

如果您想確保一次只選擇一個項目，那么實際上這就是發明單選按鈕的目的（而不是復選框）。 而且您不需要任何 JS 代碼即可完成這項工作。

演示：

 <div class="mg-toolbar"> <div class="mg-option checkbox-custom checkbox-inline"> <input class="product-list" id="file_1" type="radio" name="PDF" value="File1"> <label for="file_1">SELECT 1</label> </div> <div class="mg-option checkbox-custom checkbox-inline"> <input class="product-list" id="file_2" type="radio" name="PDF" value="File2"> <label for="file_2">SELECT 2</label> </div> <div class="mg-option checkbox-custom checkbox-inline"> <input class="product-list" id="file_3" type="radio" name="PDF" value="File3"> <label for="file_3">SELECT 3</label> </div> <div class="mg-option checkbox-custom checkbox-inline"> <input class="product-list" id="file_4" type="radio" name="PDF" value="File4"> <label for="file_4">SELECT 4</label> </div> </div>

Answer 2

將#c01 和#c02 更改為您使用的兩個復選框 ID。 我認為這可能會做你需要它做的事情。 如果選中 c01，則取消選中 c02，反之亦然

 $("#c01").click(function(){
        if($("#c01").is(':checked'))
        $("#c02").prop("checked", false);
    });
    
    $("#c02").click(function(){
        if($("#c02").is(':checked'))
        $("#c01").prop("checked", false);
    });