`

用javascript向多选框添加监听事件!

阅读更多
<html>
<body> 
    <input type="checkbox" name="checkboxName" onclick="buttonDisable"/>checkboxNameA <br/>
    <input type="checkbox"   name="checkboxName"   />checkboxNameB <br/>
    <input type="button"   value="button"  id="buttonNoDisable" disabled="disabled"  />xxxxxx <br/>
    
</body> 
<script type="text/javascript">
    
    function buttonDisable(){
        var checkbox = document.getElementsByName("checkboxName");
        for(var i=0;i<checkbox.length;i++){
            if (checkbox[i].checked) {
                document.getElementById("buttonNoDisable").disabled=false;
                return;
            }else{
                document.getElementById("buttonNoDisable").disabled=true;
            }
                
        }
    }
    
    function initPage(){
        var checkbox = document.getElementsByName("checkboxName");
        if (window.addEventListener) {//非IE,// 添加监听  
            for(var i=0;i<checkbox.length;i++){
                checkbox[i].addEventListener('click',buttonDisable,false);
            }
        } else if (window.attachEvent){//IE  
            for(var i=0;i<checkbox.length;i++){
                checkbox[i].attachEvent('onclick', buttonDisable);
            }
        }
    }
    
    initPage();
    
    
</script>
</html> 
分享到:
评论

相关推荐

    javascript下拉多选框复选框

    1. **事件监听**:需要为下拉框或复选框添加事件监听器,如`change`事件,以便在用户做出选择时更新状态。 2. **DOM操作**:使用`document.createElement`、`appendChild`、`removeChild`等方法动态添加或删除选项。...

    js页面中添加 ---左右添加多选框

    在JavaScript页面开发中,"左右添加...以上就是使用JavaScript创建"左右添加多选框"的基本步骤和原理,包括HTML结构、CSS布局以及JavaScript事件监听。根据实际需求,你可以进一步定制样式和交互,以实现更丰富的功能。

    教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果

    在JavaScript的世界里,复选框(checkbox)是网页交互中常见的元素,用户可以通过它们来选择一个或多个选项。本教程将深入讲解如何使用JavaScript实现复选框的全选和全不选功能,让您的网页交互体验更加友好。我们将...

    JavaScript复选框相关函数

    总结,JavaScript复选框的相关函数涉及获取、设置状态、操作全选/全不选及事件处理等多个方面。理解并熟练运用这些函数,能帮助开发者创建更加动态和交互性强的Web页面。在实际应用中,我们还需要考虑兼容性、性能...

    使用javascript对复选框的各种操作

    为了响应用户的操作,可以添加事件监听器,如`change`事件,以便在复选框状态改变时执行某些代码。 ```javascript checkbox.addEventListener('change', function() { console.log('Checkbox status changed!');...

    javascript+css 下拉多选框插件

    在JavaScript和CSS的帮助下,我们可以创建功能丰富、样式美观的下拉多选框插件。本教程将深入探讨如何利用这两种技术来实现这样的功能。 首先,我们需要了解JavaScript的基础。JavaScript是一种客户端脚本语言,它...

    基于Jquery和Ajax的多选框

    这意味着开发者可以轻松地在不同位置添加多选框,而不用担心相互之间的冲突。此外,它还具备“打开多选框后选中原本已选的框”的特性,这意味着组件具有状态记忆功能,当用户重新打开多选框时,之前选定的选项会自动...

    javascript多项选择框

    如果你想监听复选框状态的变化,可以添加`change`事件监听器: ```javascript checkbox.addEventListener('change', function() { if (this.checked) { console.log('Option selected'); } else { console.log...

    dtree树,带多选框

    2. **事件处理**:多选框的选中/取消选中会触发事件,开发者需要编写JavaScript代码来监听这些事件,更新数据模型并同步视图。同时,也需要处理父节点与子节点的联动逻辑,确保选中状态的一致性。 3. **DOM操作**:...

    uniapp多选标签/多选按钮/多选框源码

    同时,可以通过自定义样式和事件处理,使多选框功能更加灵活。 在实际项目中,这些组件的运用往往涉及到数据遍历和动态样式赋值。例如,可以通过`v-for`指令遍历后台返回的数据,动态生成多选标签、按钮或框,并...

    bootstrap下拉多选框

    在Bootstrap中,下拉多选框是实现用户界面交互时常见的一种元素,尤其在数据筛选、选项选择等场景下非常实用。Bootstrap本身并没有内置专门的多选下拉框组件,但通过扩展或第三方插件,我们可以轻松地实现这一功能。...

    javascript动态添加checkbox复选框的方法.docx

    // 将复选框添加到 div 容器中 myDiv.appendChild(oCheckbox); // 将文本节点添加到 div 容器中 myDiv.appendChild(myText); ``` 上述代码中,我们首先创建了一个文本节点 `myText`,接着获取了页面上 id 为 `...

    JSP+AJAX多选、全选,添加、删除、更新多选框

    本篇文章将详细探讨如何利用JSP和AJAX实现多选、全选、添加、删除以及更新多选框的功能。 一、JSP基础 JSP是一种基于Java的服务器端脚本语言,用于创建动态网页。开发者可以在HTML页面中嵌入Java代码,服务器会解析...

    Javascript checkbox复选框动画插件特效源码.zip

    JavaScript插件可以丰富这种用户体验,通过添加动画效果和自定义样式,使复选框变得更加吸引人。 【描述】:“Javascript checkbox复选框动画插件特效源码.zip” 描述中的“Javascript checkbox复选框动画插件特效...

    jQuery+layui多选框选择和美化特效

    在本文中,我们将深入探讨如何使用jQuery和layui插件实现多选框的选择和美化特效,特别是在处理父级子级结构的权限选择场景中。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax...

    多选框互选

    这段代码会在文档加载完成后,为所有`.exclusive`类的复选框添加事件监听器。当某个复选框被改变时,如果它被选中,那么所有其他复选框将被取消选中。 在实际项目中,我们可能还需要考虑更多的细节,比如防止用户...

    jquery下拉多选框

    本教程将详细介绍如何使用jQuery来实现一个功能丰富的下拉多选框。 首先,我们需要理解HTML的基本结构。一个基本的多选框在HTML中通过`&lt;select&gt;`元素定义,其`multiple`属性表示用户可以选中多个选项。例如: ```...

    js 特效 5右拖动--多选框控制

    在JavaScript中,我们可以通过获取多选框的引用(例如,通过ID或类名),然后使用`checked`属性来检查或改变其选中状态。对于"控制显示和不显示列",这意味着多选框的状态会决定对应列是否在页面上可见。我们可以...

    多选框选到一定个数不能再选

    在IT领域,尤其是在前端开发中,我们经常遇到“多选框选到一定个数不能再选”的需求。这个功能主要用于限制用户在一组复选框(Checkbox)中最多只能选择固定数量的选项,通常用于实现权限控制、多选列表的限制等场景...

Global site tag (gtag.js) - Google Analytics