【jQuery】获取 input checkbox 被选中的值

news/2024/7/10 23:41:33 标签: jquery, javascript, 前端

代码

<html>
    <head>
        <meta charset="gbk">
        <!-- 引入JQuery -->
        <script src="jquery-1.3.1.js" type="text/javascript"></script>
    </head>
 
    <body>
        <input type="checkbox" value="橘子" name="check">橘子1</input>
        <input type="checkbox" value="香蕉" name="check">香蕉1</input>
        <input type="checkbox" value="西瓜" name="check">西瓜1</input>
        <input type="checkbox" value="芒果" name="check">芒果1</input>
        <input type="checkbox" value="葡萄" name="check">葡萄1</input>
        
        <input type="button" value="方法1" id="b1">
        <input type="button" value="方法2" id="b2">
    </body>
  
    <script>javascript">
        //方法1
        $("#b1").click(function(){
            //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
            //意思是选择被选中的checkbox
            $.each($('input:checkbox:checked'),function(){
                window.alert("你选了:"+
                    $('input[type=checkbox]:checked').length+"个,其中有:"+$(this).val());
            });
        });
        
        //方法2
        $("#b2").click(function(){
            $.each($('input:checkbox'),function(){
                if(this.checked){
                    window.alert("你选了:"+
                        $('input[type=checkbox]:checked').length+"个,其中有:"+$(this).val());
                }
            });
        });
    </script>
</html>

http://www.niftyadmin.cn/n/1769987.html

相关文章

【jQuery】跳转另一个页面

1.我们可以利用http的重定向来跳转 window.location.replace("http://www.baidu.com");2.使用 href 来跳转 window.location.href "http://www.baidu.com";3.使用 jQuery 的属性替换方法 // 3.1 $(location).attr(href, http://www.baidu.com);// 3.2…

【JavaScript】封装Toast弹窗

效果 代码 /*** 封装Toast提示* param {提示信息} msg * param {延迟时间} duration */ function Toast(msg, duration) {duration isNaN(duration) ? 3000 : duration;var m document.createElement(div);m.innerHTML msg;m.style.cssText "font-family:siyuan;max…

【JavaScript】select 事件监听及选中

效果 代码 Html <!-- 创建作品集 --> <div class"create-block"><div class"create-mainbackground" style"min-width: 600px;"><div style"border-bottom: 1px solid #212529; border-radius: 5px;"><h…

【Bootstrap】模态框(Modal)插件

效果 用法 可以切换模态框&#xff08;Modal&#xff09;插件的隐藏内容&#xff1a; 通过 data 属性&#xff1a;在控制器元素&#xff08;比如按钮或者链接&#xff09;上设置属性 data-toggle"modal"&#xff0c;同时设置 data-target"#identifier" 或…

【微信小程序】页面跳转传递参数(实体,对象)

场景 在一个列表中点击了某个 item&#xff0c;跳转到详情界面&#xff0c;那么我就需要把 item 的实体数据从列表页面传递到详情页面。 实现方法 那么我们来看看微信小程序给我们提供的API&#xff1a; 这里大家可以清楚看到 api 中说到的如何传递参数&#xff0c;其实它这…

【JavaScript】实现延时3秒刷新

代码 setTimeout(function (){window.location.reload(); }, 3000);

python新浪api_python调用新浪微博API | 学步园

前提&#xff1a;在新浪微博应用开发平台成功创建一个应用&#xff0c;并获得可用APP_KEY、APP_SECRET、CALLBACK_URL。1.下载OAuth2的python版SDK&#xff0c;https://github.com/michaelliao/sinaweibopy&#xff0c;其中封装的新浪微博API的文件是weibo.py&#xff1b;2.使用…

【Vue3】Vue-Router4.x 实现路由跳转传参

传递参数 <script>import {useRouter} from "vue-router";export default {setup() {const router useRouter()const methods {goMain() {router.push({path: "/main",query: {id: 123}})}}return {...methods};},}; </script>接收参数 &l…