# jQuery Attributes - removeAttr() - attr() - prop()

### Sử dụng hàm removeAttr() trong jquery <a href="#goto-h2-0" id="goto-h2-0"></a>

Để các bạn dễ hình dung hơn thì trước tiên các bạn tham khảo ví dụ về hàm attr này đã nhé.

**Cú pháp của hàm removeAttr()** như sau: `$('selector').removeAttr('attr_name')`. Sau khi chạy đoạn code này thì đối tượng **selector** sẽ bị xóa đi thuộc tính **attr\_name**.&#x20;

```html
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       	<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    </head>
    <body>
      <input type="textbox" id="inputid" value="Giá trị input"/> Ăn <br/>
      
      <input type="button" id="view1" value="Xóa Type"/>
      <input type="button" id="view2" value="Thêm vào thuộc tính type = radio"/>
      
      <script language="javascript">
        
          // Bắt đầu code jquery
          $(document).ready(function(){
            
              // Xóa thuộc tính type khi click vào button 1
              $('#view1').click(function(){
		$('#inputid').removeAttr('value');
              });
            
            
              // Thêm vào thuộc tính type = radio
              $('#view2').click(function(){
		$('#inputid').attr('type', 'radio');
              });
          });
      </script>
    </body>
</html>
```

### &#x20;jQuery Attributes Attr() <a href="#goto-h2-0" id="goto-h2-0"></a>

Hàm **attr() trong jQuery** dùng để lấy giá trị hoặc gán giá trị cho các thuộc tính của một hoặc nhiều thẻ HTML, đây là một hàm rất quan trọng và được sử dụng rất nhiều. Vậy các thuộc tính HTML là gì? Mỗi thẻ HTML sẽ có một số thuộc tính riêng của nó như `id`, `name`, `src`, `href`. Tuy nhiên ta có thể gán cho nó một thuộc tính bất kỳ vì bản chất HTML là các thẻ XML. Nhưng thuộc tính đó có tác dụng hay không thì phải phụ thuộc vào từng thẻ HTML. Ví dụ với thẻ input thì không thể có thuộc tính `href`, `src`.

**Ví dụ**: gán thuộc tính `data-url` cho thẻ input như sau:

```html
<input type="text" name="name" value="" data-url="jks.vn" />
```

Hàm attr có hai cách sử dụng, cách thứ nhất là dùng để lấy giá trị của thuộc tính, cách thứ hai là gán giá trị cho thuộc tính.

```html
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    </head>
    <body>
      <h1>Ví dụ 1</h1>
      <strong>Sở thích của bạn là gì? </strong> <br/>
      <input type="checkbox" id="an" name="sothich" value="1"/> Ăn <br/>
       
      <input type="button" id="view1" value="Xem Name và Type"/>
      <input type="button" id="view2" value="Đổi type thành textbox"/>
      <input type="button" id="view3" value="Đổi type thành checkbox"/>
       
      <script language="javascript">
         
          // Bắt đầu code jquery
          $(document).ready(function(){
             
              // Khi click vào button có id = view1
              $('#view1').click(function(){
 
                  // Lấy tên của checkbox có id là an
                  var name = $('#an').attr('name');
 
                  // lấy type của checkbox
                  var type = $('#an').attr('type');
                 
                  alert('Name là ' + name + ' và type là ' + type);
 
              });
             
                 
              // Khi click vào button có id = view2
              $('#view2').click(function(){
                  // Thay đổi kiểu thành textbox
                  $('#an').attr('type', 'textbox');
                 
              });
             
             
              // Khi click vào button có id = view3
              $('#view3').click(function(){
                  // Thay đổi kiểu thành radio
                  $('#an').attr('type', 'radio');
                 
              });
             
          });
         
      </script>
       
    </body>
</html>
```

### jQuery Attributes Prop() <a href="#goto-h2-1" id="goto-h2-1"></a>

**Hàm prop() trong jquery** cũng dùng để lấy các thuộc tính của thẻ, tuy nhiên cách trả về kết quả lại khác một xíu. Đối với những thuộc tính có dạng `true/false` thì thay vì trả về giá trị của thuộc tính như hàm attr() thì nó sẽ trả về true hoặc false.

```html
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    </head>
    <body>
      <h1>Ví dụ 2</h1>
      <strong>Sở thích của bạn là gì? </strong> <br/>
      <input type="checkbox" id="an" name="sothich" value="1" checked/> Ăn <br/>
       
      <input type="button" id="view1" value="Xem Name"/>
      <input type="button" id="view2" value="Kiểm tra có check hay không"/>
       
      <script language="javascript">
         
          // Bắt đầu code jquery
          $(document).ready(function(){
             
              // Khi click vào button có id = view1
              $('#view1').click(function(){
                    alert($('#an').prop('name'));
              });
             
             
              $('#view2').click(function(){
                    alert($('#an').prop('checked'));
              });
                 
          });
         
      </script>
       
    </body>
</html>
```

Các bạn thấy khi click vào button thứ hai thì nó alert() lên `true`, còn nếu bạn bỏ checked đi thì nó sẽ alert() lên là `false`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jks.gitbook.io/tai-lieu-wordpress/chuong-2-frontend-co-ban/kien-thuc-ve-jquery/jquery-attributes-removeattr-attr-prop.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
