Home > Article > Web Front-end > How to delete the name attribute value in jquery
Two methods: 1. Use attr() to modify the value of the name attribute and set it to an empty character. The syntax is "$(selector).attr("name","");". 2. Use prop() to modify the value of the name attribute and set it to an empty character. The syntax is "$(selector).prop("name","");".
The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.
HTML name attribute
name is mainly an attribute that only exists in form elements.
name attribute specifies the name of the form element (eg input). The
name attribute is used to identify the form data after it is submitted to the server or to reference the form data through JavaScript on the client.
Note: Only form elements with the name attribute set can pass their values when submitting the form.
jquery deletes the name attribute value
Deleting the name attribute value can be understood as clearing the name attribute value, that is, setting it to an empty character.
JQuery provides two functions for setting attribute values:
attr()
prop()
Method 1: Use attr() to set attribute values
attr() syntax:
//单个属性
$(selector).attr("属性名","新属性值");
//多个个属性
$(selector).attr({属性1:"新值",属性2:"新值"....});Example: Modify the value of the name attribute and set it to an empty character
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("input").attr("name","");
});
});
</script>
</head>
<body>
<form action="form_action.asp" method="get">
<p>name：<input type="text" name="fullname" /></p>
<p>email：<input type="text" name="email" /></p>
</form>
<button>删除name属性值</button>
</body>
</html>Method 2: Use prop() to set the attribute value
prop() syntax:
//单个属性
$(selector).prop("属性名","新值");
//多个个属性
$(selector).prop({属性1:"新值",属性2:"新值"....});Example: Modify the value of the name attribute and set it to an empty character
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("input").prop("name","");
});
});
</script>
</head>
<body>
<form action="form_action.asp" method="get">
name：<input type="text" name="name" /><br />
email：<input type="text" name="email" /><br />
password：<input type="password" name="password" /><br />
</form><br />
<button>删除name属性值</button>
</body>
</html>
jquery prop () and attr() difference:
attr() definition
attr() method sets or returns the attributes and values of the selected element .
When this method is used to return an attribute value, the value of the first matching element is returned.
When this method is used to set attribute values, one or more attribute/value pairs are set for the matching element.
prop()Definition
The prop() method sets or returns the properties and values of the selected element.
When this method is used to return an attribute value, the value of the first matching element is returned.
When this method is used to set attribute values, one or more attribute/value pairs are set for the set of matching elements.
$('').attr()Returns the html object
$(' ').prop()returns the DOM object
prop()
method operates radio (checkbox) and the like When a control is selected, the selected value of the control will also change accordingly. That is, you can control both its selection and its deselection;
is similar to $("...").attr("checked"); returns true or false
If there is a corresponding attribute, the attribute is returned. If not, an empty string is returned.
attr():
Method operation## When controls such as #adio (checkbox) are selected, the selected value of the control will not change accordingly. That is, you can only control its selection, but not its deselection;
$("...").attr("checked");The returned value is 'checked' or undefined
Usage scenarios of attr and prop:
1 .Add the attribute name and the attribute will take effect. You should use prop();2. If there are two attributes, true and false, use prop(); (such as 'checked', 'selected', 'disabled', etc. ) 3. For others, use attr();Officially recommended use:
jQuery video Tutorial、web front-end video】
The above is the detailed content of How to delete the name attribute value in jquery. For more information, please follow other related articles on the PHP Chinese website!