Custom HTML Buttons That Will Check a Checkbox?

asked on November 7, 2017

I'm looking to use existing custom HTML buttons to check either a Yes or No checkbox on a form. The purpose is to direct the form through an exclusive gateway depending on which button is clicked. There are only two possible outcomes, Yes or No.

The custom HTML code is as follows:

<input id="btnPayCard" value="Pay by Credit Card" type="button">
<input id="btnPayCash" value="Pay by Cash, Check or PO" type="button">

The checkbox I would like to fill is a field called 'Paid'. There is either a 'Yes' or 'No' option to be checked. If 'btnPayCard' is clicked I would like the 'Yes' checkbox checked, and if 'btnPayCash' is clicked 'No' should be checked. This could function in the same matter with a radio button if needed.

My current JavaScript, which is not working, is as follows. I am a novice user of JavaScript so I'm sure I have some glaring mistakes in the code. I added a CSS class to my checkbox field of 'checkbox'.

function btnPayCard() {
  $('.checkbox input').prop('Yes', true);
}

function btnPayCash() {
  $(.'checkbox input').prop('No', true);
}

Any help or suggestions would be appreciated!

1 0

SELECTED ANSWER

replied on November 7, 2017 • Show version history

Hi Mitch,

Try this:

<button onclick="btnPayCard()" type="button">Pay by Credit Card</button>&nbsp;<button onclick="btnPayCash()" type="button">Pay by Cash, Check or PO</button>

function btnPayCard() {
  $('#Field1-0').prop('checked', true); //1-0 refers to yes
}
  
function btnPayCash() {
  $('#Field1-1').prop('checked', false); //1-1 refers to no
}

You can find the ID of the Yes and No checkboxes by inspecting each element in the form preview.

3 0

replied on November 7, 2017

Hey Tri,

I have the same type of setup, and it does work for me, but only if I take it out of the document.ready function. When I put the document.ready function back in it stops working. Is this because it only reads the html while it is loading?

0 0

replied on November 9, 2017

This worked once I placed the function in the other code I was working with. I actually duplicated each line depending on what HTML button was clicked.

 $('#btnPayCard').click(function(){
      $('#Field58-0').prop('checked', true);
      $('#Field58-1').prop('checked', false);

This ensures that only one checkbox can be checked at a time. After doing this I realized that in my case a radio button would probably be best. I just added it and removed the second 'false' line in each case and it worked like a charm.

0 0

Question

Question

Custom HTML Buttons That Will Check a Checkbox?

Answer

Replies

Sign in to reply to this post.