您的位置: 首页  >  IT文章  >  python: jquery实现全选 反选 取消

python: jquery实现全选 反选 取消

分类: IT文章 • 2023-11-14 16:31:12

引入这个jquery-1.12.4.js 

jquery实现全选 反选 取消

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<body>
<input type="button" value="quanxuan" onclick="全选()"/>
<input type="button" value="fanxuan" onclick="反选()"/>
<input type="button" value="quxiao" onclick="取消()"/>

<table>
    <thead>
    <tr>
        <th>选择</th>
        <th>ip</th>
        <th>端口</th>
    </tr>

    </thead>
    <tbody class="tb">
    <tr>
        <td><input type="checkbox"/></td>
        <td>1.1.1.</td>
        <td>88</td>

    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>1.1.1.</td>
        <td>88</td>

    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>1.1.1.</td>
        <td>88</td>

    </tr>
    </tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<!--第一种方法-->
<script>
    function quanxuan() {
        $('input[type="checkbox"]').prop('checked', true)
    }
    function quxiao() {
        $('input[type="checkbox"]').prop('checked', false)
    }
    //    function fanxuan() {
    //        $('input[type="checkbox"]').each(function () {
    //            if(this.checked){
    //                this.checked=false
    //            }else {
    //                  this.checked=true
    //            }
    //
    //        })
//    用jquery实现反选
// checkbox  radio 选择一定要用prop
//$().prop('checked') 获取值
//$().prop('checked',true) 设置值
    function fanxuan() {
        $('input[type="checkbox"]').each(function () {
            if ($(this).prop("checked")) {
                $(this).prop("checked", false)
            } else {
                $(this).prop("checked", true)
            }

        })

    }

</script>


</body>
</html>

相关推荐