jquery复选框选中及下拉框选中指定项(删除项)

云烟 • 2023年 12月 12日下午6:00 • 未分类 • 阅读 176

欢迎大家来到IT世界,在知识的湖畔探索吧!

（1）复选框选中及下拉框选中指定项(删除项)

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%
        String contextPath = request.getContextPath();
    %>
    <title>test</title>
    <script language="javascript" src="<%=contextPath%>/js/base/jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">

        // 复选框选中或取消选中
        function allChecked() {
            var isAllChecked = $("#allChecked").attr("checked");
            $("input[name='chSel']").each(function(){
                if( isAllChecked != undefined && isAllChecked == "checked" ) {
                    // 复选框全选
                    $(this).attr("checked", true);
                } else {
                    $(this).removeAttr("checked");
                }
            });

        }

        function changeSelect() {
            var selVal = $("#selCity").val();
            alert("使用下拉改变事件onchange触发的方法，当前选中下拉框的值="+ selVal);
        }

        function deleteThr() {
            $("#selCity option[value=3]").remove();
        }
        function selSec() {
            // 选中下拉框项值为2的第一项：上海
            // $("#selCity").val("2");
            // 或使用下行代码来选中
            $("#selCity").find("option:contains('上海')").attr("selected", true);
        }
    </script>

</head>
<body>

    <input type="checkbox" value="3" id="allChecked" onclick="allChecked()" /> 全选
    <input type="checkbox" value="1" name="chSel" /> 数学
    <input type="checkbox" value="2" name="chSel" /> 语文
    <br />
    <input type="button" value="删除下拉框第三项" onclick="deleteThr()" />
    <input type="button" value="选中下拉框项值为2的第一项：上海" onclick="selSec()" />
    下拉框：
    <select id="selCity" onchange="changeSelect()">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">杭州</option>
    </select>

</body>
</html>

欢迎大家来到IT世界,在知识的湖畔探索吧!

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/35308.html