www.webdeveloper.com
Results 1 to 8 of 8

Thread: Checkbox uncheck by using radio button

  1. #1
    Join Date
    Oct 2012
    Location
    istanbul
    Posts
    64

    Checkbox uncheck by using radio button

    Hello,

    The selected checkboxes (if there are)should uncheck when only the radio button is selected. How can I do this? Can you help?

    HTML Code:
    <input type="radio" name="combine" id="combine" value="1" onclick="return radioEvet();">
    Note: I use this for another job: onclick="return radioEvet();"

    HTML Code:
    <input type="checkbox" name="uc[]" id="uc" />
    <input type="checkbox" name="uc[]" id="uc" />
    <input type="checkbox" name="uc[]" id="uc" />
    <input type="checkbox" name="uc[]" id="uc" />
    <input type="checkbox" name="uc[]" id="uc" />
    <input type="checkbox" name="uc[]" id="uc" />
    <input type="checkbox" name="uc[]" id="uc" />
    <input type="checkbox" name="uc[]" id="uc" />
    <input type="checkbox" name="uc[]" id="uc" />
    Best Regards
    Last edited by Adem; 10-03-2013 at 09:20 AM.

  2. #2
    Join Date
    Oct 2013
    Location
    Boston, MA
    Posts
    13
    Quote Originally Posted by Adem View Post
    Hello,

    The selected checkboxes (if there are)should uncheck when only the radio button is selected. How can I do this? Can you help?

    HTML Code:
    <input type="radio" name="combine" id="combine" value="1" onclick="return radioEvet();">
    Note: I use this for another job: onclick="return radioEvet();"

    Best Regards
    Can you post your code for the radioEvet() function?

  3. #3
    Join Date
    Oct 2012
    Location
    istanbul
    Posts
    64
    Quote Originally Posted by haggy() View Post
    Can you post your code for the radioEvet() function?
    Thank you for your answer

    Code:
    function radioEvet() {    
    var ele = document.getElementById("hide");     
    if(ele.style.display == "block") {             
    ele.style.display = "none";
    }
    }

  4. #4
    Join Date
    Oct 2013
    Location
    Boston, MA
    Posts
    13
    Ok well there are two things you're going to need.

    Since you want to get all checkbox elements by name, the getElementsByName() function will get them for you.
    Then you want to go through each checkbox, see if the checked attribute is true. If it is then you need to uncheck it by setting it to false.

  5. #5
    Join Date
    Oct 2012
    Location
    istanbul
    Posts
    64
    not working

    Code:
    function radioEvet() {    
    var ele = document.getElementById("hide");     
    if(ele.style.display == "block") {             
    ele.style.display = "none";
    document.getElementsByName("uc[]").checked=false
    }
    }
    and
    document.getElementsByName("uc").checked=false
    and
    For ID
    document.getElementById("uc").checked=false
    Note: Works only the first checkbox, others not working



    not working


    Regards
    Last edited by Adem; 10-06-2013 at 05:17 PM.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,353

    Red face

    You cannot have duplicate 'id' values.
    You are using the getElementsByName statement incorrectly
    as it returns a 'collection' and does not have an attribute of 'checked'

    In your example, there is not an element named 'hide' to modify.

    Because you have only one radio button, it will be set when you click it
    and you have no other button to reset it later.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    <script type="text/javascript">
    function radioEvet() {
      var sel = document.getElementsByName("uc[]");
      for (var i=0; i<sel.length; i++) { sel[i].checked = false; } 
    }
    </script>
    
    </head>
    <body>
    <input type="checkbox" name="uc[]" />  <!-- duplicate 'id=' values are illegal -->
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    
    <input type="radio" name="combine" id="combine" onclick="return radioEvet();">
    
    </body>
    </html>
    I see no reason to have a radio button to have an id when you never use it, but I left it in.

    This works, but it may not be what you desire based upon your original post.

  7. #7
    Join Date
    Oct 2012
    Location
    istanbul
    Posts
    64
    It works perfectly.
    Thank you very much

    HTML Code:
    <script>
    function showHideTable() {    
    var ele = document.getElementById("ShowHide");     
    if(ele.style.display == "none") {             
    ele.style.display = "block";      }     
    else {         
    ele.style.display = "block";     
    }
    }
    
    function radioEvet() {    
    var ele = document.getElementById("ShowHide");     
    if(ele.style.display == "block") {             
    ele.style.display = "none";
      var sel = document.getElementsByName("uc[]");
      for (var i=0; i<sel.length; i++) { sel[i].checked = false; }
    }
    }
    </script>
    <input type="radio" name="combine" id="combine" onclick="return radioEvet();">
    
    <input type="radio" name="combine" id="combine" value="3" onclick="return showHideTable();">
    
    <!-- Hide checkboxes by default -->
    
    <div id="ShowHide" style="display:none;"> 
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    <input type="checkbox" name="uc[]" />
    </div>

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,353
    Quote Originally Posted by Adem View Post
    It works perfectly.
    Thank you very much
    You're most welcome.
    Happy to help.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles