如何在jquery中使optgroup成为一个复选框

Question

我有以下代码，它使用optgroup显示包含组的复选框列表。现在我的问题是，如何确保组名都有复选框，以便一次可以选择一个组？请找到底部的屏幕截图。

   <select title="Fruits" multiple="multiple" data-native-menu="false" id="fruits" name="fruits[]">
<option selected="selected" label="All" value="">All</option>
<optgroup label="Fruits" class="fruit" value="">
    <option label="apple" value="1">Apple</option>
    <option label="pear" value="2">Pear</option>
    <option label="orange" value="3">Orange</option>
</optgroup>
<optgroup label="Berrys" class="berries" value="">
    <option label="strawberry" value="4">Strawberry</option>
    <option label="raspberry" value="5">Raspberry</option>
    <option label="blueberry" value="6">Blueberry</option>
</optgroup>
   </select>