我有一個 Javascript / Jquery 函式來控制復選框組。
復選框是通過資料庫呼叫在 PHP 表單上創建的，因此我迭代地瀏覽記錄集并在 html 中創建復選框。
對于每個復選框，我為它分配一個“checkboxgroup”類 一個數字識別符號來創建一組“喜歡”記錄。我最終得到多個這樣的復選框：
<tr class="tablebody">
<td><input name="contactresolveid2048" id="contactresolveid2048" type="checkbox" class="checkboxgroup0"/></td>
<td>David Smith</td>
</tr>
<tr class="tablebody">
<td><input name="contactresolveid19145" id="contactresolveid19145" type="checkbox" class="checkboxgroup0"/></td>
<td>graham Foots</td>
</tr>
<tr class="tablebody">
<td><input name="contactresolveid19146" id="contactresolveid19146" type="checkbox" class="checkboxgroup0"/></td>
<td>Tom Silly</td>
</tr>
如您所見，這 3 個復選框的類別為“checkboxgroup0”
以下函式檢測對表單（其中可能有很多）上的任何復選框組的單擊，并取消選中所有不是被單擊的復選框（屬于同一組）。
$('[class^="checkboxgroup"]').click(function() {
var thisClass = $(this).attr('class');
var $checkboxgroup = $('input.' thisClass);
$checkboxgroup.filter(':checked').not(this).prop('checked', false);
});
在大多數情況下，當唯一的類是“checkboxgroup0”時，這可以正常作業。
但是，當驗證發生時，JQuery 驗證會將“有效”或“錯誤”類附加到通過或失敗驗證的任何欄位的類串列中，因此我最終可以擁有一個“checkboxgroup0 有效”的 .attr(class)。
我的問題是這樣的：
如何在沒有任何無關類的情況下回傳部分選定類的整個類名？
通過使用選擇器 $('[class^="checkboxgroup"]') 我需要該選擇器的整個部分 'checkboxgroup0' 并且沒有其他可能分配給它的類。
uj5u.com熱心網友回復：
您遇到的這個問題是使用增量 id/class 屬性不是好的做法的原因之一。
要在您的 JS 中解決此問題，您可以在每個復選框上使用相同的類。然后，您可以data改為按屬性對它們進行分組。使用此方法意味著元素上的類數或其在class屬性字串中的位置無關緊要。
試試這個例子：
顯示代碼片段
$('.checkboxgroup').click(function() {
let $this = $(this);
let $group = $(`.checkboxgroup[data-group="${$this.data('group')}"]`);
$group.not(this).prop('checked', false);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="tablebody">
<td><input name="contactresolveid2048" id="contactresolveid2048" type="checkbox" class="checkboxgroup" data-group="0" /></td>
<td><label for="contactresolveid2048">David Smith</label></td>
</tr>
<tr class="tablebody">
<td><input name="contactresolveid19145" id="contactresolveid19145" type="checkbox" class="checkboxgroup" data-group="0" /></td>
<td><label for="contactresolveid19145">graham Foots</label></td>
</tr>
<tr class="tablebody">
<td><input name="contactresolveid19146" id="contactresolveid19146" type="checkbox" class="checkboxgroup" data-group="0" /></td>
<td><label for="contactresolveid19146">Tom Silly</label></td>
</tr>
</table>但是，值得注意的是，單獨使用 HTML 可以更好地實作您嘗試做的事情。只需使用radio輸入并為它們提供所有相同的name屬性，然后您就可以獲得您嘗試免費創建的行為：
<table>
<tr class="tablebody">
<td><input name="contactresolve" id="contactresolveid2048" type="radio" /></td>
<td><label for="contactresolveid2048">David Smith</label></td>
</tr>
<tr class="tablebody">
<td><input name="contactresolve" id="contactresolveid19145" type="radio" /></td>
<td><label for="contactresolveid19145">graham Foots</label></td>
</tr>
<tr class="tablebody">
<td><input name="contactresolve" id="contactresolveid19146" type="radio" /></td>
<td><label for="contactresolveid19146">Tom Silly</label></td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/315383.html
標籤：javascript 查询