`

处理元素绑定及单选框与复选框的脚本

阅读更多

1:元素绑定for

显式的联系:
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSn" />
隐式的联系:
<label>Date of Birth: <input type="text" name="DofB" /></label>

2:问卷用相应的单选框和复选框,点击文字和元素都能选中。通过脚本控制

//如果单选
            if($ul.is(".single")){
                $ul.children().click(function(){
                    $(":radio",$(this)).attr('checked',true);
                    $(":radio",$(this).siblings()).attr('checked',false);
                });
            }else{//如果是复选框
                $ul.children().click(function(event){
                    var $target = $(event.target);
                    var type = $target.attr("type");
                    //如果不是checkbox直接元素的触发要明确知道是哪个元素进行的触发

                   //如果是type元素本身,不进行处理
                    if(type == "undefined" || type == undefined ){
                        var $checkbox = $(":checkbox",$(this));
                        var checked = $checkbox.attr('checked');
                        if(checked){
                            $checkbox.attr("checked",false);
                        }else{
                            $checkbox.attr("checked",true);
                        }
                    }
                });
            }

注意:其中的取值

//单选框

var $rchecked =$(":radio:checked",$(this));

//复选框

$(':checkbox:checked',$this).each(function(i){//遍历每一个复选框

}

分享到:
评论

相关推荐

    一个漂亮的基于jQuery单选框跟复选框效果Demo源码

    在这个项目中,可能会使用`fadeIn()`, `fadeOut()`, 或其他动画函数来增强用户与单选框和复选框交互时的视觉体验。 8. **模块化和组织**:在"js"文件夹中,可能包含了一个或多个JavaScript文件,分别负责不同的功能...

    jQuery单选框和复选框美化插件

    4. **事件处理**:根据需求,你可以为单选框和复选框绑定自定义的事件处理函数,如`change`、`click`等,以便在用户交互时执行特定的操作。 5. **定制样式**:通过修改CSS样式表,你可以进一步定制单选框和复选框的...

    jQuery实现美化版的单选框和复选框

    为了提高页面性能,可以使用事件委托,如`.on('click', 'selector', function() {...})`,这样可以减少事件监听器的数量,特别是在处理大量复选框或单选框时。 8. **兼容性测试**: 最后,确保你的代码在主流...

    jQuery实现自定义黑色单选框和复选框代码.zip

    在这个项目中,目标是改变原生HTML表单元素(单选框和复选框)的外观,使其与黑色主题相符合。这通常涉及到以下步骤: 1. **选择元素**:使用jQuery选择器定位到所有的单选框和复选框。例如,可以使用`$('input...

    标签展示形式来美化单选框或复选框的jQuery插件.zip

    在网页设计中,单选框(radio button)和复选框(checkbox)是常见的交互元素,用于用户选择或确认信息。然而,它们的默认样式在许多浏览器中相对朴素,可能不符合现代网页设计的审美需求。"标签展示形式来美化单选...

    jsp+js带单选复选框的动态树

    JavaScript接收到数据后,利用JSON解析出树结构,并创建对应的DOM元素,同时绑定单选或复选框的事件监听器。当用户通过单击节点或复选框进行选择时,JavaScript会更新树的状态,并可能触发AJAX请求,将用户的选择...

    使用JQuery制作复选框的全选或单选特效

    例如,我们可以使用`$("selector")`来选取元素,`.click()`来绑定点击事件,`.prop("checked", value)`来改变复选框的选中状态。 1. **创建HTML结构**: 创建一个主复选框,例如`全选`,并为每个子复选框设置一个...

    用jquery与css打造个性化的单选框和复选框

    创建个性化的单选框和复选框主要利用了jQuery库和CSS样式表的技术。在这个过程中,我们首先要理解单选框和复选框的基本HTML结构,然后通过CSS来美化它们的外观,并利用jQuery实现它们的交互逻辑。 HTML结构中,单选...

    dtree和dtree_checkbox(dtree复选框)

    - **复选功能**:每个节点都可以添加复选框,用户可以进行单选或多选操作。 - **状态管理**:能够跟踪和管理所有节点的选择状态,包括全选、反选、清除选择等。 - **事件处理**:提供丰富的事件接口,如点击复选框时...

    单选复选插件.zip

    这个"单选复选插件.zip"压缩包包含了一个自定义的插件,它允许用户动态地添加或删除复选框,这种功能在许多网页应用中都非常实用,比如表单设计、设置选项等。 首先,我们来详细了解一下JavaScript和jQuery。...

    能弹出复选框列表的combobox

    标题中的“能弹出复选框列表的ComboBox”是指一个具有复选框功能的下拉列表框。在标准的ComboBox控件中,用户只能从下拉列表中选择一个项。但是通过自定义,我们可以创建一个组合框,它的下拉部分是一个可多选的列表...

    JQuery复选框全选效果如何实现

    第一部分是全选按钮的事件绑定和状态获取,第二部分是获取所有复选框的元素并根据全选按钮的状态改变这些复选框的checked属性。 1. 获取所有复选框的方法 文档中提到了几种方法来选取页面中所有的复选框元素。 - ...

    Javascript 弹出式复选框 (JQuery 插件 mulitselector).zip

    在给定的资源"Javascript 弹出式复选框 (JQuery 插件 mulitselector).zip"中,我们可以推测这是一个利用jQuery开发的插件,专门用于实现弹出式的多选功能。 首先,让我们来深入了解一下jQuery和它的核心概念。...

    使用JQuery封装的Select&Checkbox&Radio脚本-维豪信息技术有限公司内部

    3. 获取选中项:通过遍历所有复选框,筛选出`is(':checked')`为true的项,获取其值或文本。 4. 多选事件:使用`click()`或`change()`事件监听复选框的状态变化。 三、jQuery封装Radio Radio(单选按钮)在HTML中是...

    dtree checkBox

    【dtree checkBox】是一种在数据树(dtree)中实现的功能,它允许用户通过复选框(checkBox)来选择或取消选择树形结构中的节点。这个功能在许多应用中非常常见,例如在文件管理器、组织结构图或者权限设置等场景。...

    struts标签整理

    此脚本用于验证用户是否选择了至少一个复选框选项,如果没有选择,则会弹出提示框。 ### 总结 以上是关于Struts框架中`html:radio`、`html:select`、`html:checkbox`和`html:multibox`标签的详细介绍及使用示例。...

    vue.js全选单选删除选中代码.zip

    这可以通过为每个列表项设置独立的复选框,并将它们与Vue实例中的数据模型关联起来。当选中一个项时,可以更新对应的数据模型,确保其他项保持未选中状态。 2. **获取选中值**: 当用户完成选择后,可能需要获取...

    HTML常用表单元素操作源码

    - `checkbox`:复选框,允许用户选择多个选项。 2. **HTML属性**: - `id`:用于唯一标识一个元素,方便JavaScript或CSS选择和操作。 - `class`:定义元素类,可以为一类元素设置共同样式。 - `value`:定义...

    jQuery实现表格与ckeckbox的全选与单选功能

    本文将介绍如何利用jQuery来实现表格中复选框的全选与单选功能,以及通过JavaScript来实现隐藏和显示按钮的功能。我们会使用HTML、jQuery和JavaScript代码来展示这些功能的实现方法。 首先,我们要了解全选与单选...

    vue.js实现的全选与全不选功能示例【基于elementui】

    `&lt;el-checkbox&gt;`是Element UI提供的复选框组件,它可以被用来创建一个复选框,支持单选和多选功能。但是,Element UI的checkbox组件内通常只能嵌入简单的字符串,如果需要嵌入标签或更复杂的元素,我们可以采用`...

Global site tag (gtag.js) - Google Analytics