How can I elegantly get two HTML checkboxes to tick each other off?

Question

I have two mutually exclusive checkboxes; that being so, I'd like each one to automatically reflect the opposite state of the other when a change is made: if checkboxA is checked, checkboxB should be, if checked, unchecked (etc., I'm sure you know what I mean).

I'm creating the checkboxes in my code-behind like so:

ckbxPaymentForSelf = new CheckBox();
ckbxPaymentForSelf.Text = "myself";
ckbxPaymentForSelf.ID = "ckbxPaymentForSelf";
this.Controls.Add(ckbxPaymentForSelf);

ckbxPaymentForSomeoneElse = new CheckBox();
ckbxPaymentForSomeoneElse.Text = "someone else";
ckbxPaymentForSomeoneElse.ID = "ckbxPaymentForSomeoneElse";
this.Controls.Add(ckbxPaymentForSomeoneElse);

Based on this, I thought maybe I could use the checkbox's Name property and set them both to the same value, something like "ckbxsSelfOrSomeoneElse" but there is no "Name" property on Checkbox available to me.

I could write some jQuery like so (pseudoscript):

$(document).on("change", '[id$=ckbxPaymentForSelf]', function () {
    var ckd = this.checked;
    if (ckd) // check ckbxPaymentForSomeoneElse and uncheck if it it's checked
    else // check ckbxPaymentForSomeoneElse and check if it it's unchecked
});

$(document).on("change", '[id$=ckbxPaymentForSomeoneElse]', function () {
    var ckd = this.checked;
    if (ckd) // check ckbxPaymentForSelf and uncheck if it it's checked
    else // check ckbxPaymentForSelf and check if it it's unchecked
});

...but am wondering if there is a more obvious or elegant solution to this, as this is indubitably a common requirement.

UPDATE

I tried 's answer:

$(document).on("click", '[id$=ckbxPaymentForSelf]', function () {
    alert('reached onclick for ckbxpaymentforself');
    $('#ckbxPaymentForSomeoneElse').prop('checked', !this.checked);
});

$(document).on("click", '[id$=ckbxPaymentForSomeoneElse]', function () {
    alert('reached onclick for ckbxpaymentforsomeoneelse');
    $('#ckbxPaymentForSelf').prop('checked', !this.checked);
});

...but, illogically (it seems to me and, obviously, him), it doesn't work. The strange/suspicious thing is that the alert messages are showing twice! I have to click them twice to dismiss them. Why would that be, and could that be the/a problem? I did notice that the jQuery appears twice in the "View Source" although, of course, it is in only one place in the actual source code (at the bottom of the .asxc file).

UPDATE 2

As wilusdaman suggested (make it an answer, Wilus, and I'll accept it as such), the elegantest way is to use radiobuttons instead. All that is needed is this:

rbPaymentForSelf = new RadioButton();
rbPaymentForSelf.Text = "myself";
rbPaymentForSelf.ID = "rbPaymentForSelf";
rbPaymentForSelf.GroupName = "SelfOfSomeoneElse";
this.Controls.Add(rbPaymentForSelf);

String checkboxPaymentForSomeoneElseText = "someone else";
rbPaymentForSomeoneElse = new RadioButton();
rbPaymentForSomeoneElse.Text = checkboxPaymentForSomeoneElseText;
rbPaymentForSomeoneElse.ID = "rbPaymentForSomeoneElse";
rbPaymentForSomeoneElse.GroupName = "SelfOfSomeoneElse";
this.Controls.Add(rbPaymentForSomeoneElse);

...and this jQuery, relatedly, then acts:

/* If user selects "payment for self" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the form */
$(document).on("change", '[id$=rbPaymentForSelf]', function () {
    if (this.checked) {
        $('[id$=panelSection2]').slideUp();
        $('[id$=panelSection3]').slideUp();
        $('[id$=_MailStopRow]').slideDown();
        $('[id$=_AddressRows]').slideUp();
    }
});

/* If user selects "payment for someone else" (they are seeking payment for someone else, as opposed to themselves), make sections 2 and 3 on the form visible */
$(document).on("change", '[id$=rbPaymentForSomeoneElse]', function () {
    if (this.checked) {
        $('[id$=panelSection2]').slideDown();
        $('[id$=panelSection3]').slideDown();
        $('[id$=_MailStopRow]').slideUp();
        $('[id$=_AddressRows]').slideDown();
    }
});

However, the sections that should show if the user selects "someone else" do not display the first time the user (me for now) selects the "someone else" radio button - subsequently, it does work, though...

Answer 1

i am able to achieve using javascript as below:

<body>
<input type="checkbox" id="one" name="one" onchange="check1()"/>
<input type="checkbox" id="two" name="two" onchange="check2()"/>
<script>
function check1()
{
if(one.checked)
{
document.getElementById("two").checked = false;
}
else
{
document.getElementById("two").checked = true;
}
}
function check2()
{
if(two.checked)
{
document.getElementById("one").checked = false;
}
else
{
document.getElementById("one").checked = true;
}
}
</script>
</body>