...

View Full Version : Controlling Textboxes with Javascript



jason_kelly
09-24-2011, 06:59 PM
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

Old Pedant
09-24-2011, 07:12 PM
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.

jason_kelly
09-24-2011, 08:02 PM
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

Old Pedant
09-24-2011, 08:27 PM
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>

Old Pedant
09-24-2011, 08:28 PM
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>

jason_kelly
09-24-2011, 08:35 PM
That will work.

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

Short and sweet.

Much thanks again

J

blaze4218
09-24-2011, 09:04 PM
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>

Old Pedant
09-25-2011, 01:49 AM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum