07/01/2019, 14:13

JQuery API: :checkbox Selector

checkbox Selector sẽ lựa chọn tất các phần tử input có type=checkbox. $( ":checkbox" ) tương đương với $( "[type=checkbox]" ). Cũng giống như những selector giả định khác(những selector bắt đầu bằng ":") bạn nên đặt trước nó một tên thẻ hoặc một selector ...

checkbox Selector sẽ lựa chọn tất các phần tử input có type=checkbox.

$( ":checkbox" ) tương đương với $( "[type=checkbox]" ). Cũng giống như những selector giả định khác(những selector bắt đầu bằng ":") bạn nên đặt trước nó một tên thẻ hoặc một selector khác, nếu không nó sẽ được hiểu là bộ chọn toàn bộ("*"), nói các khác $( ":checkbox" ) tương đương với $( "*:checkbox" ), do đó $( "input:checkbox" ) nên được sử dụng để thay thế $( ":checkbox" ).

Chú ý: Bởi vì :checkbox là một Jquery extension và không phải là một phần thiết lập của CSS, các truy vấn sử dụng :checkbox sẽ không thể phát huy hiệu quả của phương thức querySelectorAll(). Để đạt được hiệu quả cao nhất khi sử dụng bạn nên sử dụng [type="checkbox"] để thay thế.

Cú pháp

Cú pháp
jQuery( ":checkbox" )

Ví dụ

Tìm kiếm tất cả các thẻ input có type=checkbox và đổi màu cho chúng:

Code RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>all demo</title>
        <style>
            textarea {
                height: 35px;
            }
            div {
                color: red;
            }
            fieldset {
                margin: 0;
                padding: 0;
                border-awidth: 0;
            }
            .marked {
                background-color: yellow;
                border: 3px red solid;
            }
        </style>
        <script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <h1>Học lập trình miễn phí tại code24h.com</h1>
        <fieldset>
            <input type="button" value="Input Button">
            <input type="checkbox">
             
            <input type="checkbox">
            <input type="file">
            <input type="hidden">
             
            <input type="image">
            <input type="password">
            <input type="radio">
             
            <input type="reset">
            <input type="submit">
            <input type="text">
            <select>
              <option>Option</option>
            </select>
         
            <textarea></textarea>
            <button>Button</button>
        </fieldset>
        <button onclick="myFunction()">Click vào đây để xem kết quả</button>
        <script>
            function myFunction(){
                var input = $( "input:checkbox" )
                .wrap( "<span></span>" )
                .parent()
                .css({
                    background: "yellow",
                    border: "3px red solid"
                });
            }
        </script>
    </body>
</html>

Kết quả:

Tham khảo: jquery.com

Nguồn: code24h.com

0