uncheck a checkbox when I check another

i have a problem, i need to uncheck a checkbox when check another checkbox. but checkboxes must not have the same name. the name field must be different.

       <input type="radio" class="new-control-input" name="custom-radio-1">

  <input type="radio" class="new-control-input" name="custom-radio-2">

How can I make them uncheck?

CodePudding user response：

Using JavaScript you can do something like this:

function uncheckAndCheck(event) {

  // gets all radios with the name prefix like 'custom-radio-'
  // and uncheck all of them
  document.querySelectorAll( "input[type='radio'][name^='custom-radio-']" ).forEach( radio => {
    radio.checked = false;
  });
  
  // checks the radio that triggered the click event
  event.target.checked = true;
  
}

<input type="radio" class="new-control-input" name="custom-radio-1" onclick="uncheckAndCheck(event)"/>
<input type="radio" class="new-control-input" name="custom-radio-2" onclick="uncheckAndCheck(event)"/>