Controlling Textboxes with Javascript

Hello,

I need your help.

I have 2 checkboxes.

How would I control one from the other?

Eg.

[ ] Option A

[ ] Option B

- If Option A was checked first and, I put a checkmark in option B then Uncheck Option A and leave option B checked.

- If Option B was checked and, I put a check mark in Option A then uncheck Option B and leave Option A checked.

How would that be written in Javascript, I am totally confused.

Any help with this is much and foremost greatly appreciated.

Cheers,

J

Ummm...


<label><input type="radio" name="options" value="A"/> Option A</label>
<label><input type="radio" name="options" value="B"/> Option B</label>

Presto. No JavaScript needed. Just use the proper HTML type. Radio buttons instead of checkboxes.

I like the idea of a radio button, but i'd like to keep it to only checkboxes for styling.

I was thinking:


<p><input type="checkbox" name="chk1" onclick="chk_val2()" value="ON"> Check 1</p>
<p><input type="checkbox" name="chk2" onclick="chk_val1()" value="ON"> Check 2</p>

<script language="javascript">

function chk_val1(){
if (document.getElementById('chk1').checked = true) {
document.getElementById('chk1').checked = false
}
}
function chk_val2(){
if (document.getElementById('chk2').checked = true) {
document.getElementById('chk2').checked = false
}
}

</script>


Is there an easier way to re-write and shorten this code?

J

You don't need to give value= to a checkbox if you just want it to be "on", it will be by default.

And don't work so hard with the JS.

<form ...>
...
<input type="checkbox" name="chk1" onclick="this.form.chk2.checked=false;"/>
<input type="checkbox" name="chk2" onclick="this.form.chk1.checked=false;"/>
...
</form>

Oh...but that *does* allow a person to UN-check a checkbox.

If you don't want to allow that:

<form ...>
...
<input type="checkbox" name="chk1" onclick="this.form.chk2.checked=false;this.checked=true;"/>
<input type="checkbox" name="chk2" onclick="this.form.chk1.checked=false;this.checked=true;"/>
...
</form>

That will work.

I love that your code eliminates the need for an if statement.

Short and sweet.

Much thanks again

J

I know the question only considered 2 checkboxes, and I too love the succinctness of Old Pedant's response; but I have actually come into this very same issue in the past, and I thought it would be fun to share my solution as well.
The idea here is was that I wanted my form to be expandable as needed, and to reuse the same code (of course) in different parts of the form if need be.

<script>
function CLEAR_SUB_SET(subSet){
for(i in subSet.childNodes){
subSet.childNodes[i].checked = false;
}
}
</script>

<form>
<input type="checkbox" name="other_chk"" /> <!-- Not Affected by script -->

<div id="RadioChecks">
<input type="checkbox" name="sub_chk1" onclick="CLEAR_SUB_SET(this.parentNode);this.checked=true;" />
<input type="checkbox" name="sub_chk2" onclick="CLEAR_SUB_SET(this.parentNode);this.checked=true;" />
<input type="checkbox" name="sub_chk3" onclick="CLEAR_SUB_SET(this.parentNode);this.checked=true;" />
</div>
</form>

Enjoy! :)

Edit:
Thougtht about it some more, and this would be more succinct:

<script>
function CLEAR_SUB_SET(subSet){
for(i in subSet.parentNode.childNodes){
subSet.parentNode.childNodes[i].checked = false;
}
subSet.checked = true;
}

</script>

<form>
<input type="checkbox" name="other_chk"" /> <!-- Not Affected by script -->

<div id="RadioChecks">
<input type="checkbox" name="sub_chk1" onclick="CLEAR_SUB_SET(this);" />
<input type="checkbox" name="sub_chk2" onclick="CLEAR_SUB_SET(this);" />
<input type="checkbox" name="sub_chk3" onclick="CLEAR_SUB_SET(this);" />
</div>
</form>

May not work if there are <label>s or even blank text nodes in there. childNodes may contain things that have no checked property. Even that may not hurt, of course.

A variation that should always work, though, is minor change:

<script>
function CLEAR_SUB_SET(subSet){
var cbs = subSet.parentNode.getElementsByTagName("input");
for(c = 0; c < cbs.length; ++c )
{
cbs[c].checked = false;
}
subSet.checked = true;
}

</script>

<form>
<input type="checkbox" name="other_chk"" /> <!-- Not Affected by script -->

<div id="RadioChecks">
<input type="checkbox" name="sub_chk1" onclick="CLEAR_SUB_SET(this);" />
<input type="checkbox" name="sub_chk2" onclick="CLEAR_SUB_SET(this);" />
<input type="checkbox" name="sub_chk3" onclick="CLEAR_SUB_SET(this);" />
</div>
</form>