<!DOCTYPE HTML>

<html>

<head>

<title>checkbox设置只能单选</title>

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">

</script>

</head>

<body>

<p>您喜欢的水果？</p>

<button id="add">新增</button>

<form>

    <div id="checkboxDiv" >

        <input type="checkbox" name="checkboxName" value="1" />苹果<br/>

        <input type="checkbox" name="checkboxName" value="2" />西瓜<br/>

        <input type="checkbox" name="checkboxName" value="3" />香蕉<br/>

        <input type="checkbox" name="checkboxName" value="4" />桃子<br/>

        <input type="checkbox" name="checkboxName" value="5" />芒果<br/>

    </div>

</form>

<script type="text/javascript">

$(document).ready(function(){

    $("#checkboxDiv").on("click", "input", function(){

        if($(this).is(':checked')){

            $(this).attr('checked',true).siblings().attr('checked',false);

        }else{

            $(this).attr('checked',false).siblings().attr('checked',false);

        }

    })

    $("#add").click(function(){

        $("#checkboxDiv").append("<input type='checkbox' name='checkboxName' value='6' />梨子<br/>");

    })

});

</script>

</body>

</html>

　　新增的元素一定要在$("#父元素")内

dom元素新增后不会触发事件的更多相关文章

  1. DOM学习笔记（三）DOM元素的访问、修改与事件

    访问 HTML 元素等同于访问节点,使用的是document对象下的数个getElement方法,然后再对返回的元素(或元素列表)进行具体内容的访问和修改,或者响应对应的事件是操作 一些 DOM 对象 ...

  2. 解决js动态改变dom元素属性后页面及时渲染问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header ...

  3. C1:DOM 元素的尺寸和位置

    DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括内容区宽/高,padding,border,不包括margin.如果元素的box-sizei ...

  4. kviy TextInput 触发事件

    from kivy.uix.widget import Widget from kivy.app import App from kivy.lang import Builder Builder.lo ...

  5. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  6. target属性用于返回最初触发事件的DOM元素。

    target属性用于返回最初触发事件的DOM元素. 在HTML文档中,我们为<p>元素绑定点击事件("click"),由于DOM元素的事件冒泡机制,我们点击<p& ...

  7. jquery中动态新增的元素节点无法触发事件解决办法

    在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法． 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“re ...

  8. event.target 属性返回哪个 DOM 元素触发了事件。

    <ul> <li>list <strong>item 1</strong></li> <li><span>list ...

  9. 一个DOM元素绑定多个事件时，先执行冒泡还是捕获

    绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...

随机推荐

  1. git的搭建和使用

    目录: 1.git与github介绍2.下载安装Git-20-64-bit.exe3.Git常用命令 git与github介绍 Git是什么 Git是一个开源的[分布式][版本控制系统],用于敏捷高效 ...

  2. CLR 调试概述

    利用公共语言运行时 (CLR) 调试 API,工具供应商可以编写调试器来调试运行于 CLR 环境中的应用程序. 要调试的代码可为 CLR 支持的任何代码种类.CLR 调试 API 主要是使用非托管代码 ...

  3. 14-ESP8266 SDK开发基础入门篇--上位机串口控制 Wi-Fi输出PWM的占空比,调节LED亮度,8266程序编写

    https://www.cnblogs.com/yangfengwu/p/11102026.html 首先规定下协议  ,CRC16就不加了哈,最后我会附上CRC16的计算程序,大家有兴趣自己加上 上 ...

  4. Zotero使用教程(2)-数据备份

    小书匠 这篇文章的目标是让你无论是 换系统,重新安装zotero等都可以还原回你的文献库,而且整个过程基本是自动完成的. 这部分解决下面的两种情况: 1.zotero有自己既定的一套存储方式,不是一般 ...

  5. 鱼塘钓鱼（fishing）（信息学奥赛一本通 1373）

    [问题描述] 有N个鱼塘排成一排(N<100),每个鱼塘中有一定数量的鱼,例如:N=5时,如下表: 即:在第1个鱼塘中钓鱼第1分钟内可钓到10条鱼,第2分钟内只能钓到8条鱼,……,第5分钟以后再 ...

  6. queue怎么用咧↓↓↓

    queue(队列) 定义:queue <int> a; 插入队尾:a.push(x); 查询队尾:a.back(); 查询队首:a.front(); 删除队首:a.pop(); 查询长度: ...

  7. SpringBoot聚合项目打包

    1.打包遇到的问题: 子模块打包时,每次打包出来的jar都只有3k左右,没办法运行,目测应该是依赖的jar没有打包进来! 2.解决办法: 2.1.主项目的pom.xml里面不需要打包配置 2.2.在需 ...

  8. mark_rabbitMQ

    一.1.6 和1.7的区别 二.63跟65好像有点差异 有些jar包问题 三.预取策略 https://blog.csdn.net/hry2015/article/details/79078312 四 ...

  9. vue+elementui搭建后台管理界面(6登录和菜单权限控制[二])

    根据权限计算路由的代码 /** * 通过meta.role判断是否与当前用户权限匹配 * @param roles * @param route */ function hasRoles (roles ...

  10. JAVA：使用栈实现一个队列

    使用栈实现一个队列,需要弄清楚栈和队列的区别: 栈:先进后出: 队列:先进先出. 实现思路: 1)通过两个栈(pushStack / popStack)对倒,确保 popStack 栈的出栈顺序与队列 ...