薛乎乎~ 2024-04-26 18:25 采纳率: 87.5%
浏览 1
已结题

(标签-jquery)

修改下列代码，利用jquery

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选课</title>
</head>

<body>
    <h1>请选择课程</h1>
    <input type="CHECKBOX" name="sample1" onClick="doCheck(this)">C语言<br>
    <input type="CHECKBOX" name="sample2" onClick="doCheck(this)">机械制图<br>
    <input type="CHECKBOX" name="sample3" onClick="doCheck(this)">单片机<br>
    <input type="CHECKBOX" name="sample4" onClick="doCheck(this)">自动控制<br>
    <input type="CHECKBOX" name="sample5" onClick="doCheck(this)">传感器<br>
    <input type="CHECKBOX" name="sample6" onClick="doCheck(this)">高等数学<br>
    <input type="CHECKBOX" name="sample7" onClick="doCheck(this)">计算机基础<br>
    <input type="CHECKBOX" name="sample8" onClick="doCheck(this)">Oracle数据库<br>
    <input type="CHECKBOX" name="sample9" onClick="doCheck(this)">商务英语<br>
    <input type="CHECKBOX" name="sample10" onClick="doCheck(this)">PLC设计基础
</body>
<style>
    body{
        margin: 50px;
    }
</style>
<script>
    var c = 0, limit = 6;
    function doCheck(obj) {
        obj.checked ? c++ : c--;
        if (c > limit) {
            obj.checked = false;
            alert("您最多可以选择6门课程");
            c--;
        }
    } 
</script>

</html>
  • 写回答

5条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-26 18:25
    关注

    引自免费微信小程序：皆我百晓生

    为了将这段HTML和JavaScript代码转换为使用jQuery，我们需要引入jQuery库，并对事件处理进行相应的调整。首先，在<head>部分添加jQuery的CDN链接。然后，我们将使用jQuery来选择元素并绑定点击事件。以下是修改后的代码：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选课</title>
    <!-- 引入jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            var c = 0, limit = 6;
            
            // 使用jQuery选择所有复选框并绑定click事件
            $('input[type="checkbox"]').on('change', function () {
                if ($(this).is(':checked')) {
                    c++;
                } else {
                    c--;
                }

                if (c > limit) {
                    $(this).prop('checked', false);
                    alert("您最多可以选择6门课程");
                    c--;
                }
            });
        });
    </script>
</head>

<body>
    <h1>请选择课程</h1>
    <input type="CHECKBOX" name="sample1">C语言<br>
    <input type="CHECKBOX" name="sample2">机械制图<br>
    <input type="CHECKBOX" name="sample3">单片机<br>
    <input type="CHECKBOX" name="sample4">自动控制<br>
    <input type="CHECKBOX" name="sample5">传感器<br>
    <input type="CHECKBOX" name="sample6">高等数学<br>
    <input type="CHECKBOX" name="sample7">计算机基础<br>
    <input type="CHECKBOX" name="sample8">Oracle数据库<br>
    <input type="CHECKBOX" name="sample9">商务英语<br>
    <input type="CHECKBOX" name="sample10">PLC设计基础
</body>
<style>
    body {
        margin: 50px;
    }
</style>
</html>

    在这个版本中，我做了以下更改：

    1. 在<head>部分添加了jQuery的CDN链接。
    2. 将原始的onClick事件替换为使用jQuery的on('change', ...)方法，这样可以确保在复选框状态改变时触发事件。
    3. 使用$(this).is(':checked')检查当前复选框是否被选中，而不是直接使用obj.checked。
    4. 使用$(this).prop('checked', false)来取消选中复选框，而不是直接设置obj.checked = false。

    现在，这个页面应该能正常工作，限制用户最多只能选择6门课程。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(4条)

报告相同问题？

  • jquery 如何获取某个标签下面的img标签？
    2014-08-13 23:22
    回答 5 已采纳 var $current = $("#slideshow div.current") 在使用find()方法可以找到子元素然后遍历 $current.find("img").each(funct
  • jquery append 图片不显示
    2013-07-15 20:47
    回答 1 已采纳 src里面的是jsp自带的对象的的方法，获得web容器根目录，但是jsp是需要编译的，你在运行时加入这段代码应该是无效的，是否可以后台获取这个值做好拼装给前台？或者直接用相对路径。 检验图片的路径可
  • jquery 获取对象问题
    2013-04-19 17:10
    回答 2 已采纳 2、$(div).find("input[type='text'],[type='hidden']") 加个, 表示或 否则是且
  • html-jquery多语言选择下拉框
    2017-02-27 17:09
    HTML和jQuery多语言选择下拉框是一种常见的网页交互设计...通过合理的设计和编程，可以创建出既实用又具有良好用户体验的多语言选择功能。在实际开发过程中，可以根据项目需求进行适当的调整和优化，确保兼容性和性能。
  • 怎么让一个class用jquery变背景色？
    2012-09-24 23:35
    回答 1 已采纳 改为这样： $(document).ready(function(){ $(".mtmulall").mousedown(function(){ $(".mtmulall")
  • HTML DOCTYPE标签
    2011-01-10 17:55
    回答 3 已采纳 input.text.onecharText 这个对吗？ input[type=text] .onecharText试试
  • jsp页面到js，使用jquery显示详细信息
    2010-03-31 09:52
    回答 2 已采纳 JQ我已经N久没用了,不是很熟悉了,不过 infoNode.html(data);这句不是已经把东西传回来了?难道你没有看到结果? var productId = aNode.attr("prod
  • Soundboard-jQuery
    2021-07-03 22:02
    【标签】"JavaScript" 指出这个项目的核心编程语言是 JavaScript，这是一种广泛用于客户端Web开发的脚本语言。JavaScript 用于处理网页的动态内容，如表单验证、动画效果、以及像 Soundboard-jQuery 这样的音频控制...
  • 在javascript中直接使用struts标签有问题没？
    2013-08-26 08:54
    回答 4 已采纳 没有问题，struts在action处理后跳到jsp页面编译的class，处理struts标签会直接把它换成valueStack中的值，不管在html中还是在javascript中
  • 关于自定义标签向页面输出JSON数据的问题
    2010-08-10 21:28
    回答 2 已采纳 var content = $("#tg").text();
  • 如何避免多个相同的 script 或 link标签 重复访问加载资源
    2010-08-05 15:02
    回答 2 已采纳 只会加载一次！ 浏览器会判断的！ 外面加载 。 里面的也是可以用到的！
  • jquery插件库-jquery放大镜效果.zip
    2023-03-15 05:09
    在网页设计领域，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript编程，使得网页交互变得更加丰富和便捷。这个“jquery插件库-jquery放大镜效果.zip”文件包含了一个jQuery插件，该插件用于实现一种...
  • 大一HTML的题目，有点搞不懂 html5
    2021-10-26 20:11
    回答 1 已采纳 <style> td{ vertical-align: top; } </style> 在 head里架上这个 文字垂直居中
  • Colorful-Scheduler-with-JQuery
    2021-05-30 07:53
    从【标签】"JavaScript" 我们可以推断，该项目是使用 JavaScript 语言编写的，尤其是利用了 jQuery 库来简化 DOM 操作和事件处理。jQuery 是一个广泛使用的 JavaScript 库，它简化了 JavaScript 的编程，提供了丰富...
  • image-transform-jquery
    2021-04-06 14:52
    标签中提到的“JavaScript”暗示了这个项目的核心部分可能涉及到JavaScript编程。JavaScript是一种广泛使用的脚本语言，常用于网页的交互逻辑，与CSS一起，可以实现丰富的动态效果。在这个项目中，jQuery库很可能被...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 5月17日
  • 已采纳回答 5月9日
  • 创建了问题 4月26日

悬赏问题

  • ¥15 mySQL5.7.34安装遇到的问题
  • ¥15 结构功能耦合指标计算
  • ¥20 visual studio中c语言用ODBC链接SQL SERVER
  • ¥50 AI大模型精调（百度千帆、飞浆）
  • ¥15 非科班怎么跑代码？如何导数据和调参
  • ¥15 福州市的全人群死因监测点死亡原因报表
  • ¥15 Altair EDEM中生成一个颗粒，并且各个方向没有初始速度
  • ¥15 系统2008r2 装机配置推荐一下
  • ¥15 悬赏Python-playwright部署在centos7上
  • ¥15 psoc creator软件有没有人能远程安装啊