javascript - Cannot Uncheck Checkbox (HTML) - Stack Overflow

admin管理员组

文章数量:1289832

I am working on an autoplete function using JavaScript for a form, and have run into a problem with the checkbox in my HTML file. The basic idea is that the user should be able to fill out their shipping name and zip code in a form fieldset, and then if they check off "Is billing info the same?", a JS function will be called that fills in the billing fieldset for billing name and zip code with the same shipping values. The checkbox is able to acplish this, but I am unable to uncheck it to clear the billing info. Essentially, I cannot uncheck my checkbox. My code is below:

function billingFunction(){
  var billName=document.getElementById("billingName");
  var shipName=document.getElementById("shippingName");
  var billZip=document.getElementById("billingZip");
  var shipZip=document.getElementById("shippingZip");
  var same=document.getElementById("same");

  if (same.checked=true){
    billName.value=shipName.value;
    billZip.value=shipZip.value;
  }
  else{
    billName.value="";
    billZip.value="";
  }
}

<form>
    <fieldset>
        <legend>Shipping Information</legend>
        <label for ="shippingName">Name:</label>
        <input type = "text" name = "shipName" id = "shippingName" required><br/>
        <label for = "shippingZip">Zip code:</label>
        <input type = "text" name = "shipZip" id = "shippingZip" pattern = "[0-9]{5}" required><br/>
    </fieldset>

    <input type="checkbox" id="same" name="same" onchange= "billingFunction()"/>
    <label for = "same">Is the Billing Information the Same?</label>

    <fieldset> 
        <legend>Billing Information</legend>
        <label for ="billingName">Name:</label>
        <input type = "text" name = "billName" id = "billingName" required><br/>
        <label for = "billingZip">Zip code:</label>
        <input type = "text" name = "billZip" id = "billingZip" pattern = "[0-9]{5}" required><br/>
    </fieldset>
        <input type = "submit" value = "Verify"/>
    </form>

I am working on an autoplete function using JavaScript for a form, and have run into a problem with the checkbox in my HTML file. The basic idea is that the user should be able to fill out their shipping name and zip code in a form fieldset, and then if they check off "Is billing info the same?", a JS function will be called that fills in the billing fieldset for billing name and zip code with the same shipping values. The checkbox is able to acplish this, but I am unable to uncheck it to clear the billing info. Essentially, I cannot uncheck my checkbox. My code is below:

function billingFunction(){
  var billName=document.getElementById("billingName");
  var shipName=document.getElementById("shippingName");
  var billZip=document.getElementById("billingZip");
  var shipZip=document.getElementById("shippingZip");
  var same=document.getElementById("same");

  if (same.checked=true){
    billName.value=shipName.value;
    billZip.value=shipZip.value;
  }
  else{
    billName.value="";
    billZip.value="";
  }
}

<form>
    <fieldset>
        <legend>Shipping Information</legend>
        <label for ="shippingName">Name:</label>
        <input type = "text" name = "shipName" id = "shippingName" required><br/>
        <label for = "shippingZip">Zip code:</label>
        <input type = "text" name = "shipZip" id = "shippingZip" pattern = "[0-9]{5}" required><br/>
    </fieldset>

    <input type="checkbox" id="same" name="same" onchange= "billingFunction()"/>
    <label for = "same">Is the Billing Information the Same?</label>

    <fieldset> 
        <legend>Billing Information</legend>
        <label for ="billingName">Name:</label>
        <input type = "text" name = "billName" id = "billingName" required><br/>
        <label for = "billingZip">Zip code:</label>
        <input type = "text" name = "billZip" id = "billingZip" pattern = "[0-9]{5}" required><br/>
    </fieldset>
        <input type = "submit" value = "Verify"/>
    </form>

• javascript
• html
• checkbox

Share Improve this question Follow edited Feb 6, 2018 at 21:20 messerbill 5,63911 gold badge3131 silver badges3939 bronze badges asked Feb 6, 2018 at 21:00 Matthew RussoMatthew Russo 7322 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Your if statement parison is not using the correct equality check, instead it is assigning the checked property as true. Change your code from:

if (same.checked=true){ //This does assignment
   billName.value=shipName.value;
   billZip.value=shipZip.value;
}
else{
   billName.value="";
   billZip.value="";
}

To this:

if (same.checked === true){ //This does equality check
   billName.value=shipName.value;
   billZip.value=shipZip.value;
}
else{
   billName.value="";
   billZip.value="";
}

You are assigning the value true to same.checked because you have left one equal sign. Modify: if(same.checked == true) or simply if(same.checked)

本文标签： javascriptCannot Uncheck Checkbox (HTML)Stack Overflow