How to uncheck a checkbox in pure JavaScript?

后端 未结 4 1982
萌比男神i
萌比男神i 2020-12-10 00:40

Here is the HTML Code:

相关标签:
4条回答
  • 2020-12-10 00:56

    Recommended, without jQuery:

    Give your <input> an ID and refer to that. Also, remove the checked="" part of the <input> tag if you want the checkbox to start out unticked. Then it's:

    document.getElementById("my-checkbox").checked = true;
    

    Pure JavaScript, with no Element ID (#1):

    var inputs = document.getElementsByTagName('input');
    
    for(var i = 0; i<inputs.length; i++){
    
      if(typeof inputs[i].getAttribute === 'function' && inputs[i].getAttribute('name') === 'copyNewAddrToBilling'){
    
        inputs[i].checked = true;
    
        break;
    
      }
    }
    

    Pure Javascript, with no Element ID (#2):

    document.querySelectorAll('.text input[name="copyNewAddrToBilling"]')[0].checked = true;
    
    document.querySelector('.text input[name="copyNewAddrToBilling"]').checked = true;
    

    Note that the querySelectorAll and querySelector methods are supported in these browsers: IE8+, Chrome 4+, Safari 3.1+, Firefox 3.5+ and all mobile browsers.

    If the element may be missing, you should test for its existence, e.g.:

    var input = document.querySelector('.text input[name="copyNewAddrToBilling"]');
    if (!input) { return; }
    

    With jQuery:

    $('.text input[name="copyNewAddrToBilling"]').prop('checked', true);
    
    0 讨论(0)
  • 2020-12-10 00:58
    <html>
        <body>
            <input id="check1" type="checkbox" checked="" name="copyNewAddrToBilling">
        </body>
        <script language="javascript">
            document.getElementById("check1").checked = true;
            document.getElementById("check1").checked = false;
        </script>
    </html>
    

    I have added the language attribute to the script element, but it is unnecessary because all browsers use this as a default, but it leaves no doubt what this example is showing.

    If you want to use javascript to access elements, it has a very limited set of GetElement* functions. So you are going to need to get into the habit of giving every element a UNIQUE id attribute.

    0 讨论(0)
  • 2020-12-10 01:12

    There is another way to do this:

    //elem - get the checkbox element and then
    elem.setAttribute('checked', 'checked'); //check
    elem.removeAttribute('checked'); //uncheck
    
    0 讨论(0)
  • 2020-12-10 01:15

    You will need to assign an ID to the checkbox:

    <input id="checkboxId" type="checkbox" checked="" name="copyNewAddrToBilling">
    

    and then in JavaScript:

    document.getElementById("checkboxId").checked = false;
    
    0 讨论(0)
提交回复
热议问题