<!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. 【数位DP】数字统计

    题目 给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. 数位DP (1)分情况,逐位讨论. (2)模型:计算在[L,R]中有多少个数满足条件. (3)套路:将 ...

  2. 【POJ2632】Crashing Robots

    题目传送门 本题知识点:模拟 模拟机器人的运作过程,分别有三种功能,L 则是左转90°,R 则是右转90°,L 则是前进1格.让我们去模拟并判断它们的状态. 输入: 第一行是测试样例 第二行分别是矩形 ...

  3. 京东Java架构师讲解购物车的原理及Java实现

    今天来写一下关于购物车的东西, 这里首先抛出四个问题: 1)用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后 不登录用户名和密码问:购物车商品还在吗? 2)用户登陆了用户名密码,添加商品,关闭浏 ...

  4. koa post提交数据，koa-bodyparser中间件来获取post提交数据

    原生 Nodejs 获取 post 提交数据 首先创建并初始化一个node应用,根路由使用index.ejs模板 var Koa=require('koa') var router = require ...

  5. IDEA版本控制忽略文件或目录

    写在前面 废话不多说了, 新创建了个helloworld, 见图: 这谁受得了啊 修改配置 在上图红框内部的后面添加: *.iml;*.idea;*.gitignore;*.sh;*.classpat ...

  6. ingress nginx https配置

    3.https配置第一步:制作自签证书 [root@master demo]# openssl genrsa -out tls.key 2048 [root@master demo]# openssl ...

  7. eclipse没有server选项怎么解决

    eclipse没有server选项怎么解决 步骤: 1,在eclipse菜单“Help”中选择“InstallNew Software”如下图所示. 2,然后在Work with中点击Add,如下图所 ...

  8. android -------- Base64 加密解密算法

    Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法.可查看RFC2045-RFC2049,上面有MIME的详细规范. Ba ...

  9. git远程版本回退

    本文为博主原创,未经允许不得转载: 之前在git提交版本时,发现将新开发的代码提交到了另一个分支上,为了不影响提交分支代码的 功能,需要回退到之前的版本. 在使用命令回退的时候,一直没有回退成功,有个 ...

  10. EasyUi datagrid列表增加复选框

    本文为博主原创,未经允许不得转载 1.增加复选框列 {     field: 'oid',     title: '<input type=\"checkbox\" name ...