精华内容
下载资源
问答
  • 主要介绍了JQuery勾选指定name的复选框集合并显示的方法,涉及jQuery表单元素操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  •  <script src="../js/jquery-1.5.1.min.js" type="text/javascript">    $(function () {  $("input[name='love']").click(function () {  //获得所有name为love的选中的复选框   var $Checks = $(...
    <!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>
        <title></title>
        <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("input[name='love']").click(function () {
                    //获得所有name为love的选中的复选框
                    var $Checks = $("input[name='love']:checked");
                    var arr = new Array();
                    //使用了元素的each方法
                    //循环Jquery对象里的dom数组
                    $Checks.each(function (index, value) {
                        //alert(value);
                        arr[index] = value.value;
                    });
                    $("#MessageInfo").text("你选择了" + arr.length + "个爱好," + arr.join(","));
                });
            });
        </script>
    </head>
    <body>
        <input type="checkbox" name="love"  value="FootBall" />足球
        <input type="checkbox" name="love" value="BasketBall" />篮球
        <input type="checkbox" name="love" value="VallyBall" />排球
        <p id="MessageInfo"></p>
    </body>
    </html>
    展开全文
  • jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form> 你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br /> <input type=...

    jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题

    <form>
            你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br />
            <input type="checkbox" name="items" value="足球" />足球
            <input type="checkbox" name="items" value="篮球" />篮球
            <input type="checkbox" name="items" value="羽毛球" />羽毛球
            <input type="checkbox" name="items" value="乒乓球" />乒乓球
            <br />
            <input type="button" id="send" value="提 交" />
        </form>

     

     $("#CheckedAll").click(function () {
                    if ($(this).is(":checked")) {
                        $("[name=items]:checkbox").attr("checked", true);
                    } else {
                        $("[name=items]:checkbox").attr("checked", false);
                    }
                });


    第一次执行,没问题,但第二次执行就有问题了,选择不了
     
    解决办法:把attr()换成prop()

     $("#CheckedAll").click(function () {
                    if ($(this).is(":checked")) {
                        $("[name=items]:checkbox").prop("checked", true);
                    } else {
                        $("[name=items]:checkbox").prop("checked", false);
                    }
                });
    PS:prop()和attr()区别:
     
    (来源:http://hxq0506.iteye.com/blog/1046334
     

    最近在iteye的新闻中看到jQuery已经更新到了1.6.1。和之前版本的最大变化是增加了.prop方法。但是.prop()方法和.attr()方法,单从字面上很难区分。在汉语中properties和attributes都有表示“属性”的意思。
    下面根据这篇博文(javascript:mctmp(0);),简要翻译了.prop()和.attr()的用法:
    1、从1.5.2升级到1.6.1
    通过介绍新方法.prop()以及.attr()方法的改变,jQuery1.6.1引起了一场关于attributes和properties之 间有何区别和联系的激烈讨论。同时,1.6.1也解决了一些向后兼容性问题。当从1.5.2升级到1.6.1时,你不必修改任何attribute代码。
     
    下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使用。然而,正如前面所述,jQuery1.6.1允许你使用.attr()方法就像以前它被使用在所有的情况中一样。

    2、发生了什么变化
     
    Attributes模块的变化是移除了attributes和properties之间模棱两可的东西,但是在jQuery社区中引起了一些混 乱,因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一 些bug,很难维护。jQuery1.6.1对Attributes模块进行了更新,并且修复了几个bug。
     
    特别提到的是,boolean attributes,比如:checked,selected,readonly和disabled在1.6.1中和1.6之前的处理相同。这意味着下面的代码:
    1.$(“:checkbox”).attr(“checked”, true); 
     2.$(“option”).attr(“selected”, true); 
     3.$(“input”).attr(“readonly”, true); 
     4.$(“input”).attr(“disabled”, true);  

     甚至是这样的代码:
    1.if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }  
     
    在1.6.1中没有必要为了保持之前期望的运行结果而发生任何改变。
     
    为了让jQuery1.6中的.attr()方法的变化被理解的清楚些,下面是一些使用.attr()的例子,虽然在jQuery之前的版本中能正常工作,但是现在必须使用.prop()方法代替:

    首先,window或document中使用.attr()方法在jQuery1.6中不能正常运行,因为window和document中不能有 attributes。它们包含properties(比如:location或readyState),必须使用.prop()方法操作或简单地使用 javascript原生的方法。在jQuery1.6.1中,window和document中使用.attr()将被自动转成使用.prop,而不是 抛出一个错误。
     
    其次,checked,selected和前面提到的其它boolean attributes,因为这些attributes和其相应的properties之间的特殊关系而被特殊对待。基本上,一个attribute就是以下html中你看到的:
     
    1.<input type=”checkbox” checked=”checked”>  
     
    boolean attributes,比如:checked,仅被设置成默认值或初始值。在一个checkbox的元素中,checked attributes在页面加载的时候就被设置,而不管checkbox元素是否被选中。
     
    properties就是浏览器用来记录当前值的东西。正常情况下,properties反映它们相应的attributes(如果存在的话)。但 这并不是boolean attriubutes的情况。当用户点击一个checkbox元素或选中一个select元素的一个option时,boolean properties保持最新。但相应的boolean attributes是不一样的,正如上面所述,它们仅被浏览器用来保存初始值。
     
    1.$(“:checkbox”).get(0).checked = true; 
     2.// Is the same as $(":checkbox:first").prop(“checked”, true);  
     
    在jQuery1.6中,如果使用下面的方法设置checked:
     
    1.$(“:checkbox”).attr(“checked”, true);  
     
    将不会检查checkbox元素,因为它是需要被设置的property,但是你所有的设置都是初始值
     
     
    然而,曾经jQuery1.6被释放出来的时候,jQuery团队明白当浏览器仅关心页面加载时,设置一些值不是特别的有用。所以,为了保持向后兼 容性和.attr()方法的有用性,我们可以继续在jQuery1.6.1中使用.attr()方法取得和设置这些boolean attributes。
     
    最普通的attributes是checked,selected,disabled和readOnly,但下面是jQuery1.6.1支持的使用.attr()动态地取得和设置boolean attributes/properties的完整列表:
     
    1.autofocus, autoplay, async, checked, controls, defer, disabled, 
     2.hidden, loop, multiple, open, readonly, required, scoped, selected  

     
    (译者注:大部分都是html5新增的属性)
     
    还是建议使用.prop()方法来设置这些boolean attributes/properties,即使这些用例没有转换成使用.prop()方法,但是你的代码仍然可以在jQuery1.6.1中正常运行。

    下面是一些attributes和properties的列表,正常情况下,应该使用其对应的方法(见下面的列表)来取得和设置它们。下面的是首用法,但是.attr()方法可以运行在所有的attributes情况下。
     
    注意:一些DOM元素的properties也被列在下面,但是仅运行在新的.prop()方法中

    *例如: window.location
    **如果需要在(if needed over) .width()

    .attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替(即使使用.attr("value","somevalue") 可以继续运行,就像1.6之前做的那样)
     
    3、首选用法的概述
     
    .prop()方法应该被用来处理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的 attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。
     
    上面的概述已经描述的够清楚了,我也没有必要再总结了。

    转载于:https://www.cnblogs.com/taofx/p/4139483.html

    展开全文
  • jQuery 控制勾选和去勾选

    千次阅读 2018-08-01 14:32:37
    input ratio勾选控制 $("#id").prop("checked",true); //勾选 $("#id").prop("checked",false); //去勾选 注意:一定用prop而不是用attr来控制。目前项目使用的jq版本...

    input ratio勾选控制

            $("#id").prop("checked",true);   //勾选
            $("#id").prop("checked",false);  //去勾选

    注意:一定用prop而不是用attr来控制。目前项目使用的jq版本是3.1.1,在这个版本中,类似于:

    $("#id").attr("checked","checked");
    $("#id").removeAttr("checked");

    的控制方式并不生效。

     

    在博客https://blog.csdn.net/qq_29542611/article/details/73385002中,对于这一块有非常详细的实验与说明,可以进行参考。引用该博客中作者的说明如下:

    1、对radio 、checkbox 来说说,checked属性可以保证页面初始化被选中,但是通过js或者jquery 控制checked属性并不能保证相应的被选中,同样也不能通过checked属性来判断该元素是否被选中。

    2、checked属性并不能影响form表单的值,表单页面真正被选中的元素才是form表单提交的值。

    3、通jquery的prop方法可以完美的选中或者取消选中元素,使用prop("checked",true) 选中,prop("checked",false)取消选中,通prop("checked") 返回的false或者true判断是否选中。

    展开全文
  • 功能实现:勾选jQuery zTree的某个节点后,获取根节点到当前被勾选的节点的路径。实现方法:注册onCheck事件,在事件中获取当前节点,然后通过treeNode.getParentNode遍历父亲节点连接成路径。源代码如下jQuery ...

    功能实现:勾选jQuery zTree的某个节点后,获取根节点到当前被勾选的节点的路径。

    实现方法:注册onCheck事件,在事件中获取当前节点,然后通过treeNode.getParentNode遍历父亲节点连接成路径。

    07de4f65bb1d57b7f500930d03ee70bd.png

    源代码如下

    jQuery zTree获取勾选节点的全路径

    function getPathText(node){//关键代码,通过treeNode遍历父亲节点,根节点再次调用getParentNode得到null终止循环

    var s=node.name;

    while(node=node.getParentNode())s=node.name+'/'+s;

    return s;

    }

    var setting = {

    check: {

    enable: true,

    chkStyle: "radio",

    radioType: "level"

    },

    callback:{

    onCheck:function(event,treeid,treeNode){

    alert(getPathText(treeNode))

    }},

    data: {

    simpleData: {

    enable: true

    }

    }

    };

    var zNodes =[

    { id:1, pId:0, name:"随意勾选 1", open:true},

    { id:11, pId:1, name:"随意勾选 1-1", open:true},

    { id:111, pId:11, name:"随意勾选 1-1-1"},

    { id:112, pId:11, name:"随意勾选 1-1-2"},

    { id:12, pId:1, name:"随意勾选 1-2", open:true},

    { id:121, pId:12, name:"随意勾选 1-2-1"},

    { id:122, pId:12, name:"随意勾选 1-2-2"},

    { id:2, pId:0, name:"随意勾选 2", open:true},

    { id:21, pId:2, name:"随意勾选 2-1"},

    { id:22, pId:2, name:"随意勾选 2-2", open:true},

    { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},

    { id:222, pId:22, name:"随意勾选 2-2-2"},

    { id:23, pId:2, name:"随意勾选 2-3"}

    ];

    $(document).ready(function(){

    $.fn.zTree.init($("#treeDemo"), setting, zNodes);

    });

    加支付宝好友偷能量挖...

    2013-8-7Web开发网

    展开全文
  • 使用jquery 先把删除del隐藏起来,再获取所有的checkbox,对checkbox遍历 $('.del').hide(); $(document).ready(function () { $("input:checkbox[name='questionId']").each(function () { $("input:checkbox...
  • jquery衣服尺寸勾选表单
  • 本文首先由一个在项目中遇到的jquery checkbox 勾选的bug的解决方案,引申出jQuery中attr()和prop()的差异分析,非常的实用,需要的小伙伴快来研究下吧
  • 为了让jQuery1.6中的.attr()方法的变化被理解的清楚些,下面是一些使用.attr()的例子,虽然在jQuery之前的版本中能正常工作,但是现在必须使用.prop()方法代替:     首先,window或document中使用....
  • 为了让jQuery1.6中的.attr()方法的变化被理解的清楚些,下面是一些使用.attr()的例子,虽然在jQuery之前的版本中能正常工作,但是现在必须使用.prop()方法代替:   ; padding: 0px; border: none; width: 514...
  • aaass name="selectTest"> 11 value="2">22 value="3">33 value="4">44 value="5">55 value="6">66 jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被...
  • jquery自动填充勾选框,即把勾选框打上(true),然后通过ajax方式获得勾选项列表,再把列表内的选项打上
  • 本文给大家介绍的是一段十分实用的代码,使用jQuery实现勾选复选框触发事件给input赋值,在制作项目的时候经常需要用到此功能,这里分享给大家。
  • jquery checkbox勾选/取消

    2017-12-14 11:53:00
    为了让jQuery1.6中的.attr()方法的变化被理解的清楚些,下面是一些使用.attr()的例子,虽然在jQuery之前的版本中能正常工作,但是现在必须使用.prop()方法代替:     首先,window或document中使用.attr...
  • 根据勾选不同规格的种类,...需要引入jQuery和对应图片 5.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 658
精华内容 263
关键字:

jquery勾选