how to change the buttons state?-CodePudding

I am wanting when I click on the 3rd button, the 1st and 2nd buttons will automatically turn off. On the contrary, when I click on the 2nd button, the 1st and 3rd buttons will automatically switch to off

HTML:

div {
    color: red;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table >
<thead>
  <tr>
    <th ></th>
    <th >Colum 1</th>
    <th >Colum 2</th>
    <th >Colum 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td >TH01</td>
    <td >
      <label >
        <input type="checkbox" checked="checked">
        <span ></span>
      </label>
    </td>
    <td >
      <label >
        <input type="checkbox" checked="checked">
        <span ></span>
      </label>
    </td>
    <td >
      <label >
        <input type="checkbox" checked="checked">
        <span ></span>
      </label>
    </td>
  </tr>
  
</tbody>
</table>
<div id="log"></div>

CodePudding user response：

I would use radio buttons and simple CSS styling for the toggle buttons (no need for JavaScript) - something like:

PS. IMO I find the toggle confusing for this scenario I would expect checkbox behavior (individual/unrelated).

Update I've changed the code to show toggle styling works on both radio and checkbox.

Update I've added a small script to toggle checkboxes within the same table row

// Toggle checkboxes within same row
addEventListener('change', ({ target }) => {
    if(target.type != 'checkbox') return;
    const row = target.closest('tr')
    row.querySelectorAll('input').forEach(input => {
       if(input != target) input.checked = false
    })
})

/* Toggle Styling */

.toggle {
  /* variables for configuration */
  --width: 3.5rem;
  --height: 2rem;
  --padding: 2px;
  --duration: 300ms;
  --color-default: #ccc;
  --color-checked: dodgerblue;

  appearance: none;
  width: var(--width);
  height: var(--height);
  padding: var(--padding);
  border-radius: 100vmax;
  background-color: var(--color-default);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background var(--duration), transform var(--duration);
}

.toggle:checked {
  background-color: var(--color-checked);
}

.toggle::before {
  transition: inherit;
  content: '';
  display: block;
  background: white;
  border-radius: 50%;
  width: calc(var(--height) - var(--padding) * 2);
  height: calc(var(--height) - var(--padding) * 2);
}

.toggle:checked::before {
  transform: translateX(calc(var(--width) - var(--height)));
}

<table>
  <thead>
    <tr>
      <th></th>
      <th>Colum 1</th>
      <th>Colum 2</th>
      <th>Colum 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Radio</th>
      <td><input type="radio" name="A" value="1"  checked /></td>
      <td><input type="radio" name="A" value="2"  /></td>
      <td><input type="radio" name="A" value="3"  /></td>
    </tr>

    <tr>
      <th scope="row">Checkbox</th>
      <td><input type="checkbox" name="B" value="1"  checked /></td>
      <td><input type="checkbox" name="B" value="2"  /></td>
      <td><input type="checkbox" name="B" value="3"  /></td>
    </tr>

  </tbody>
</table>

CodePudding user response：

Something like this:

const cbs = $("input[type=checkbox]");
cbs.change(function() {
    const activeOne = this;
    cbs.each( (i,o) => {
        if(activeOne !== o) o.checked = false;
    })
})

CodePudding user response：

$(function(){
    $("input:checkbox").click(function(){
        var checkboxgroup = "input:checkbox[name='" $(this).attr("name") "']";
        $(checkboxgroup).attr("checked",false);
        $(this).attr("checked",true);
    });
});

<html>
<head>
<title>Checkboxes Behave like Radio Buttons using jQuery - Tutorialsmade.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>

<input type="checkbox" name="g1" value="ans1" checked="checked"/>Ans1 <br />
<input type="checkbox" name="g1" value="ans2" checked="checked"/>Ans2 <br />
<input type="checkbox" name="g1" value="ans3" checked="checked"/>Ans3 <br />

</body>
</html>