jquery - JavaScript if check-box is checked not working - Stack Overflow

admin管理员组

文章数量:1023744

I have a website form where I have fields that I want to be required (with JQuery Plugin) only when the check-box is checked.

So far I wrote JavaScript that works if the the check-box is not checked, or checked. But when a user checks the check-box and then unchecks it the code does not work (field is still mandatory when unchecked).

Also one other bug is for some reason this same code only works for updating only one items required boolean. For example if I have the same code but make it so two elements requirements are updated the script does not work at all.

Here is the relevant source code:

<script>
function swap(){
  if(document.getElementById('must').checked){     
    document.getElementById("element1").setAttribute("required", "true");
  }else{      
    document.getElementById("element1").setAttribute("required", "false");
  }
}
</script>


<form>
<input type="checkbox" onclick="swap();" id="must" name="must" value="1" style="width:10;">
<input id="element1" type="text" name="element1" placeholder="Enter Value" >
<input type="submit" id="submit" name="submit" value="Send" >
</form>     

Any assistance would be greatly appreciated.

I have a website form where I have fields that I want to be required (with JQuery Plugin) only when the check-box is checked.

So far I wrote JavaScript that works if the the check-box is not checked, or checked. But when a user checks the check-box and then unchecks it the code does not work (field is still mandatory when unchecked).

Also one other bug is for some reason this same code only works for updating only one items required boolean. For example if I have the same code but make it so two elements requirements are updated the script does not work at all.

Here is the relevant source code:

<script>
function swap(){
  if(document.getElementById('must').checked){     
    document.getElementById("element1").setAttribute("required", "true");
  }else{      
    document.getElementById("element1").setAttribute("required", "false");
  }
}
</script>


<form>
<input type="checkbox" onclick="swap();" id="must" name="must" value="1" style="width:10;">
<input id="element1" type="text" name="element1" placeholder="Enter Value" >
<input type="submit" id="submit" name="submit" value="Send" >
</form>     

Any assistance would be greatly appreciated.

• javascript
• jquery
• forms
• checkbox
• required

Share Improve this question Follow asked Apr 23, 2013 at 1:53 Devon BernardDevon Bernard 2,30055 gold badges1919 silver badges3434 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Best way I know to check if checkbox is checked, it to use jQuery is() method (documentation). It handles x-browser differences for you. Also best way to add attribute to HTML element is to use attr() method.

if($("#must").is(":checked")) {
    $("#element1").attr('required', 'required');
} else {
    $("#element1").removeAttr();
}

You can check in DOM inspector that attribute is added.

Required attribute documentation is here.

Try this, in xhtml we specify required="required" and there no required="false", a better way is to remove attribute required on else

<script type="text/javascript">
   function swap(){
  if(document.getElementById('must').checked){     
    document.getElementById("element1").setAttribute("required", "required");
  }else{      
    document.getElementById("element1").removeAttribute("required");
  }
}
    </script>

The required attribute is a boolean attribute, it presence means that the field is required and its absence means the field isn't required. It has only 3 valid forms 1. required alone by itself 2. required="" equal to an empty string 3. required="required"

I have a website form where I have fields that I want to be required (with JQuery Plugin) only when the check-box is checked.

So far I wrote JavaScript that works if the the check-box is not checked, or checked. But when a user checks the check-box and then unchecks it the code does not work (field is still mandatory when unchecked).

Also one other bug is for some reason this same code only works for updating only one items required boolean. For example if I have the same code but make it so two elements requirements are updated the script does not work at all.

Here is the relevant source code:

<script>
function swap(){
  if(document.getElementById('must').checked){     
    document.getElementById("element1").setAttribute("required", "true");
  }else{      
    document.getElementById("element1").setAttribute("required", "false");
  }
}
</script>


<form>
<input type="checkbox" onclick="swap();" id="must" name="must" value="1" style="width:10;">
<input id="element1" type="text" name="element1" placeholder="Enter Value" >
<input type="submit" id="submit" name="submit" value="Send" >
</form>     

Any assistance would be greatly appreciated.

I have a website form where I have fields that I want to be required (with JQuery Plugin) only when the check-box is checked.

So far I wrote JavaScript that works if the the check-box is not checked, or checked. But when a user checks the check-box and then unchecks it the code does not work (field is still mandatory when unchecked).

Also one other bug is for some reason this same code only works for updating only one items required boolean. For example if I have the same code but make it so two elements requirements are updated the script does not work at all.

Here is the relevant source code:

<script>
function swap(){
  if(document.getElementById('must').checked){     
    document.getElementById("element1").setAttribute("required", "true");
  }else{      
    document.getElementById("element1").setAttribute("required", "false");
  }
}
</script>


<form>
<input type="checkbox" onclick="swap();" id="must" name="must" value="1" style="width:10;">
<input id="element1" type="text" name="element1" placeholder="Enter Value" >
<input type="submit" id="submit" name="submit" value="Send" >
</form>     

Any assistance would be greatly appreciated.

• javascript
• jquery
• forms
• checkbox
• required

Share Improve this question Follow asked Apr 23, 2013 at 1:53 Devon BernardDevon Bernard 2,30055 gold badges1919 silver badges3434 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Best way I know to check if checkbox is checked, it to use jQuery is() method (documentation). It handles x-browser differences for you. Also best way to add attribute to HTML element is to use attr() method.

if($("#must").is(":checked")) {
    $("#element1").attr('required', 'required');
} else {
    $("#element1").removeAttr();
}

You can check in DOM inspector that attribute is added.

Required attribute documentation is here.

Try this, in xhtml we specify required="required" and there no required="false", a better way is to remove attribute required on else

<script type="text/javascript">
   function swap(){
  if(document.getElementById('must').checked){     
    document.getElementById("element1").setAttribute("required", "required");
  }else{      
    document.getElementById("element1").removeAttribute("required");
  }
}
    </script>

The required attribute is a boolean attribute, it presence means that the field is required and its absence means the field isn't required. It has only 3 valid forms 1. required alone by itself 2. required="" equal to an empty string 3. required="required"

本文标签： jqueryJavaScript if checkbox is checked not workingStack Overflow