Question 35643 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

how to change the buttons state? – Jquery

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

enter image description here

HTML:

div {
    color: red;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
  <tr>
    <th class="tg-6nwz"></th>
    <th class="tg-baqh">Colum 1</th>
    <th class="tg-baqh">Colum 2</th>
    <th class="tg-baqh">Colum 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-c3ow">TH01</td>
    <td class="tg-c3ow smtp-01">
      <label class="switch">
        <input type="checkbox" checked="checked">
        <span class="slider round"></span>
      </label>
    </td>
    <td class="tg-c3ow smtp-02">
      <label class="switch">
        <input type="checkbox" checked="checked">
        <span class="slider round"></span>
      </label>
    </td>
    <td class="tg-c3ow smtp-03">
      <label class="switch">
        <input type="checkbox" checked="checked">
        <span class="slider round"></span>
      </label>
    </td>
  </tr>
  
</tbody>
</table>
<div id="log"></div>
Tags:

3

Answers


  1. 0

    Something like this:

    const cbs = $("input[type=checkbox]");
cbs.change(function() {
    const activeOne = this;
    cbs.each( (i,o) => {
        if(activeOne !== o) o.checked = false;
    })
})
    Login or Signup to reply.
  2. 0 
    $(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>
    Login or Signup to reply.
  3. 0

    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" class="toggle" checked /></td>
      <td><input type="radio" name="A" value="2" class="toggle" /></td>
      <td><input type="radio" name="A" value="3" class="toggle" /></td>
    </tr>

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

  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search