0

I have the following:

<label class="col-1 remove-check checkbox-container">
    <input type="checkbox" @onclick="@(async () => await OnRemoveClick(slh.Key, slh.Value))" />
        <span class="checkmark-detail"></span>
</label>
<label class="col-1 redirect-check checkbox-container">
    <input type="checkbox" @onclick="@(async () => await OnRedirectClick(slh.Key, slh.Value))" />
           <span class="checkmark-detail"></span>
</label>
<label class="col-1 approve-check checkbox-container">
    <input type="checkbox" @onclick="@(async () => await OnApproveClick(slh.Key, slh.Value))" />
           <span class="checkmark-detail"></span>
</label>

Is there a way using css that If I select any checkbox, then the other 2 are unselected. I want to create it such that only 1 can ever be selected or none.

bilpor
  • 3,467
  • 6
  • 32
  • 77
  • 1
    By CSS you cannot do this. If you need only one input to be selected at a time, then use `input type="radio"` – Azu Nov 18 '21 at 16:19
  • does this solve your problem?https://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group – Alan Yu Nov 18 '21 at 16:26
  • @Azu I cant use radio because I cant have a state of no selection after at least 1 selection has been made – bilpor Nov 18 '21 at 16:34
  • @AlexYu All these show Jqury or Javascript. I'm using Blazor and at the moment, the client has a policy not to use JSinterop hance my question for an answer using css only. – bilpor Nov 18 '21 at 16:40
  • @bilpor, I see, then you definitely need Javascript to contol the checkboxes. Only CSS is not enough. – Azu Nov 18 '21 at 16:41
  • Could you use radio buttons but have a 4th one which is 'Clear selection'. – A Haworth Nov 18 '21 at 18:53
  • Are you able to add some HTML? – A Haworth Nov 19 '21 at 10:30

0 Answers0