Select radio when clicking a button

Asked

Viewed 443 times

-3

I want when the person clicks on button 1, automatically the radio 2 is selected, thus preventing the user from making two clicks.

How can I do that?

inserir a descrição da imagem aqui

Note: The same thing will also happen when selecting another payment method.

Page link:

I tried using this example of the guy above, but checked is giving null!!!

Where am I going wrong?

<script type="text/javascript">// true = selecionar ~ false = deselecionar

function um(){
document.getElementById('payment_method_iugu-credit-card').checked = true;
document.getElementById('payment_method_iugu-bank-slip').checked = false;
document.getElementById('payment_method_wc_ticket_installments').checked = false;
document.getElementById('payment_method_pagseguro').checked = false;
}
function dois(){
document.getElementById('payment_method_iugu-credit-card').checked = false;
document.getElementById('payment_method_iugu-bank-slip').checked = true;
document.getElementById('payment_method_wc_ticket_installments').checked = false;
document.getElementById('payment_method_pagseguro').checked = false;
}
function tres(){
document.getElementById('payment_method_iugu-credit-card').checked = false;
document.getElementById('payment_method_iugu-bank-slip').checked = false;
document.getElementById('payment_method_wc_ticket_installments').checked = true;
document.getElementById('payment_method_pagseguro').checked = false;
}

function quatro(){
document.getElementById('payment_method_iugu-credit-card').checked = false;
document.getElementById('payment_method_iugu-bank-slip').checked = false;
document.getElementById('payment_method_wc_ticket_installments').checked = false;
document.getElementById('payment_method_pagseguro').checked = true;
}</script>
<div class="textopagamento"><h3>Pagamento</h3></div>
  <ul class="abapagamento nav nav-tabs">
 <li ><a id="bot-um" onclick="um()" href="#divhideiugu-credit-card">Cartão S/ Juros</a></li>
 <li ><a id="bot-dois" onclick="dois()" href="#divhideiugu-bank-slip">Boleto à Vista </a></li>
 <li ><a id="bot-tres" onclick="tres()" href="#divhidewc_ticket_installments">Boleto Parcelado </a></li>
 <li ><a id="bot-quatro" onclick="quatro()" href="#divhidepagseguro">Pag Seguro</a></li>
					
  </ul>
</div>

javascript html jquery
  • 1

    It would be important to put in the question the HTML of the buttons and radios so that we can know the structure and link a button to each radio.

  • I posted the page link because the HTML code is too long.

  • @Matheusrodrigues If the original code is too long, vc can reduce it to a [mcve] <== click on this link, there are great tips to reduce the code to an equivalent that reproduces the same behavior and/or problem of its original code. This is important because all relevant information should be in the question. Links should be for add-on only. If the link is out of the air, for example, still the question will continue with all information. See more about this here.

1 answer

0

Matheus there are many ways to do this:

If you want something more dynamic in the example below I mark the radio and add the respective name of the button clicked.

$(document).ready(function(){
  $("button").on("click", function() {
    var texto = $(this).text();
    $("#radio").prop("checked", true);
    $("span").html(texto);
  })
})
button{
  color: #fff;
  background-color: purple;
  border: none;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="pag-seguro">Pag Seguro</button>
<button>Cartão sem juros</button>
<button>Boleto parcelado</button>

<br><br>

<input type="radio" id="radio"><span></span>

Now what I was looking for was just to mark the check in can do so:

$(document).ready(function(){
  $("button:eq(0)").on("click", function() {
    $("input:eq(0)").prop("checked", true);
  })
  $("button:eq(1)").on("click", function() {
    $("input:eq(1)").prop("checked", true);
  })
  $("button:eq(2)").on("click", function() {
    $("input:eq(2)").prop("checked", true);
  })
})
button{
  color: #fff;
  background-color: purple;
  border: none;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Pag Seguro</button>
<button>Cartão sem juros</button>
<button>Boleto parcelado</button>

<br><br>

<input type="radio" id="pag">Pag Seguro
<input type="radio" id="car">Cartão sem juros
<input type="radio" id="bol">Boleto parcelado

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.