Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Ummm...

    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    I like the idea of a radio button, but i'd like to keep it to only checkboxes for styling.

    I was thinking:

    Code:
    <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

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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.
    Code:
    <form ...>
    ...
    <input type="checkbox" name="chk1" onclick="this.form.chk2.checked=false;"/>
    <input type="checkbox" name="chk2" onclick="this.form.chk1.checked=false;"/>
    ...
    </form>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Oh...but that *does* allow a person to UN-check a checkbox.

    If you don't want to allow that:
    Code:
    <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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jason_kelly (09-24-2011)

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    That will work.

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

    Short and sweet.

    Much thanks again

    J

  • #7
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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.
    Code:
    <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:
    Code:
    <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>
    Last edited by blaze4218; 09-24-2011 at 09:52 PM.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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:
    Code:
    <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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •