首页 > 代码库 > 对jquery操作复选框

对jquery操作复选框

2024-08-30 17:35:21   215人阅读

摘要：jquery操作复选框。使用更简洁易懂，思路清晰，逻辑更明了，很实用

 

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面-->
     </head>
     <body>
         <!--给按钮加个点击事件-->
         <input type="button" value="http://www.mamicode.com/测试" onclick="test()" />
         
     </body>    
     <script type="text/javascript">
     <!--JS方式加事件-->
         function test()
         {
             alert("aa");
         }
         
     </script>
 </html>
 点测试结果如下
技术分享

 

 

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面-->
     </head>
     <body>
         <!--给按钮加个点击事件-->
         <input type="button" value="http://www.mamicode.com/测试" onclick="test()" />
         <!--给下面的按钮加事件用jquery-->
         <input type="button" value="http://www.mamicode.com/测试2" id="btn" />
     </body>    
     <script type="text/javascript">
         function test()
         {
             alert("aa");
         }
         
 //        只有触发的时候执行
         $(document).ready(function(e) {
 //先找元素用$(测试2id)-用click给前面的按钮加点击事件-执行(function(){}匿名函数因为没有名字
         $("#btn").click(function(){
                 alert("第二个按钮");//点击之后要执行的函数。匿名函数
             })
             
             
             
         });
     
     </script>
 </html>
技术分享

 

 Jquery把复选框所选中的值取出来

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script>
    </head>
    <body>
        
            <input type="checkbox" class="ck" value="http://www.mamicode.com/张店" />张店
            <input type="checkbox" class="ck" value="http://www.mamicode.com/淄川" />淄川
            <input type="checkbox" class="ck" value="http://www.mamicode.com/周村" />周村
            <input type="checkbox" class="ck" value="http://www.mamicode.com/临淄" />临淄
            <input type="checkbox" class="ck" value="http://www.mamicode.com/博山" />博山
            
            <input type="button" value="http://www.mamicode.com/取值" id="quck" />
            <input type="button" value="http://www.mamicode.com/赋值" id="fuck" />
        
    </body>
    <script type="text/javascript">
    //复选框所选中的值取出来
        $("#quck").click(function(){
            var ck = $(".ck");
            for(var i=0;i<ck.length;i++)
            {
                //第2种写法用JS方式判断是不是选中 ck[i].checked
                if(ck.eq(i).prop("checked"))
                {
                    alert(ck.eq(i).val());
                }
            }
        })
    </script>
</html>
技术分享 
给周村赋值
$("#fuck").click(function(){
        var zhi = "周村";
        var ck = $(".ck");
        for(var i=0;i<ck.length;i++)
        {
            if(ck.eq(i).val()==zhi)
            {
                ck.eq(i).prop("checked",true);
            }
        }
    })技术分享

第二种方法拼接 给周村赋值

 

$("#fuck").click(function(){
        var zhi = "周村";
        $("[value=http://www.mamicode.com/‘"+zhi+"‘]").prop("checked",true);
        
    })

 





 对jquery操作复选框(checkbox)的12个小技巧进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助




1、获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
或者
$("input:[type=‘checkbox‘]:checked").val();
或者
$("input:[name=‘ck‘]:checked").val();


2、 获取多个checkbox选中项
$(‘input:checkbox‘).each(function() {
        if ($(this).attr(‘checked‘) ==true) {
                alert($(this).val());
        }
});


3、设置第一个checkbox 为选中值
$(‘input:checkbox:first‘).attr("checked",‘checked‘);
或者
$(‘input:checkbox‘).eq(0).attr("checked",‘true‘);


4、设置最后一个checkbox为选中值
$(‘input:radio:last‘).attr(‘checked‘, ‘checked‘);
或者
$(‘input:radio:last‘).attr(‘checked‘, ‘true‘);


5、根据索引值设置任意一个checkbox为选中值
$(‘input:checkbox).eq(索引值).attr(‘checked‘, ‘true‘);索引值=0,1,2....
或者
$(‘input:radio‘).slice(1,2).attr(‘checked‘, ‘true‘);


6、选中多个checkbox同时选中第1个和第2个的checkbox
$(‘input:radio‘).slice(0,2).attr(‘checked‘,‘true‘);


7、根据Value值设置checkbox为选中值
$("input:checkbox[value=http://www.mamicode.com/‘1‘]").attr(‘checked‘,‘true‘);


8、删除Value=http://www.mamicode.com/1的checkbox
$("input:checkbox[value=http://www.mamicode.com/‘1‘]").remove();


9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();


10、遍历checkbox
$(‘input:checkbox‘).each(function (index, domEle) {
//写入代码
});


11、全部选中
$(‘input:checkbox‘).each(function() {
        $(this).attr(‘checked‘, true);
});


12、全部取消选择
$(‘input:checkbox‘).each(function () {
        $(this).attr(‘checked‘,false);
});







 
对jquery操作复选框






























        

            
                
                  
                
                

                    联系

                    我们