精华内容
下载资源
问答
  • jQuery 获取复选框checked属性

    千次阅读 2018-05-09 11:05:21
    我们平常获取属性值一般都是用attr() 但是attr()也有不好使的时候 例如获取复选框checked属性值这是我们可以使用另一个jQuery的方法prop()$('input').prop('checked')//true = >选中//false =&...

    我们平常获取属性值一般都是用attr() 

    但是attr()也有不好使的时候  例如获取复选框checked的属性值

    这是我们可以使用另一个jQuery的方法prop()

    $('input').prop('checked')

    //true = >选中

    //false =>未选中

    另外:这只是其中一个判断复选框是否被选中的方法

    展开全文
  • 原生Js。...【-------题外话:复选框checked 和下拉框selected是默认自带的属性。只是默认没有加上,默认为false。 特殊的是:checked属性隐含带有时,不选中;只要加上checked属性,就会默认选中。】 ①

    原生Js。不是JQuery。

    ===全选按钮:checkAll;单选按钮checkItem;反选按钮:checkInverse

    ===简单记录下:三种需求的实现思路:

    【-------题外话:复选框checked 和下拉框selected是默认自带的属性。只是默认没有加上,默认为false。

    特殊的是:checked属性隐含带有时,不选中;只要显式加上checked属性(不赋值,赋任意值),都会在会默认选中。】

    ①全选全不选:

    checkAll和 所有的checkItem  的 checked值一致。

    ②反选:

    遍历,所有checkItem 的 checked值取反;

    使用标记flag判断 checkItem反选完毕后,是否选满?

    选满:设置checkAll的checked为“checked”;未选满:设置checkAll的checked为null或undefined。


    【==######=【最大的难点就是:checkedAll的checked属性值如何赋值(修改checkAll状态)?

    ==###==测试过:像好多网上说的:选中,设为true;取消选中,设为false。===不能实现。

    我做的过程:

    ===①先 取消checkedAll。

    试过:checkedAll.setAttribute("checked","false"),checkedAll.setAttribute("checked",false),checkedAll.setAttribute("checked",“unchecked”)

    都不行。根据【老师的提示:checked只有一个checked值;没有什么 unchecked,true,false作为值。

    只要显式声明了checked属性(或者 像这里事件处理 动态地为checked属性赋值为true过),那么就会默认选中】,

    ===改变思路,决定:取消掉checked属性作用。

    ===一怒之下,把checked 赋值为null。第一次测试可以了,第二次取消全选,又不行了;又赋值为undefined,可以了。

    ===取消checkedAll完毕。


    ===②再 勾选checkedAll。

    同样试过:checkedAll.setAttribute("checked","true"),checkedAll.setAttribute("checked",true),checkedAll.setAttribute("checked",“checked”)

    都不行。===同样说明:checked只有一个checked值;没有什么 true作为值。

    这里又遇到一个【奇葩问题:checkAll.setAttribute("checked",“checked”),只有第一次可以勾上全选,第二次又不行了。坑爹!

    各种查询,没解决。突然换了种相同作用的 方式试了试:checkAll.checked="checked";可以了。

    === 勾选checkedAll完毕。

    】-------做完: 勾选checkedAll;又试了下: ①先 取消checkedAll。发现checked=null或undefined,效果又一样了。null 第二次也行了。晕。

    =========看来,问题关键还是在:② 勾选checkedAll。    checked属性是否起作用。有待测试。


    ③单选选满时,同步勾选checkedAll。

    这个其实和 ②反选: “反选后checkItem选满时,同步勾选checkAll”,的情况处理一样的。甚至更简单,不再需要 对checkItem的checked值取反。


    ==================实现过程【全部完毕】。

    功能已实现。但还是不理解。

    我的问题是:checkAll.setAttribute("checked",“checked”);和 checkAll.checked = “checked”;有什么区别呢?

    (前者在第二次 同步勾选全选时 就无效了,后者有效)

    哪位前辈能指点一下,万分感激!

    /*==========问题:======?
    使用:checkallBtn.setAttribute("checked","checked");,第二次(反选或选满时)全选按钮 选不上;
    而使用作用相同的checkallBtn.checked="checked";却功能正常(至少目前这样)。
    【问题产生原因?】
    checkallBtn.setAttribute("checked","checked")和
    checkallBtn.checked="checked";区别?
    =====
    【老师答案:一种是dom对象属性,一种是js对象的属性,两种属性是有区别的。不需要做深究。
    只需要记住通常最通用的 方式:checkallBtn.checked=true或false。即可】
    * */

    =====贴上代码:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			table{
    				width: 500px;
    				margin: 0 auto;
    				border-collapse: collapse;
    			}
    			td,th{
    				border: 1px solid green;
    			}
    		</style>
    	</head>
    	<body>
    		<table>
    			<tr>
    				<th>
    					<!--		======【只要有checked就默认选中】
    						<input type="checkbox" id="checkall" checked="undefined" οnclick="checkAll()"/>
    					<input type="checkbox" id="checkall" checked οnclick="checkAll()"/>-->
    					<input type="checkbox" id="checkall"  οnclick="checkAll()"/>
    					<input type="button" id="checkinverse" οnclick="checkInverse()" value="反选" />
    				</th>
    				<th>学号</th>
    				<th>姓名</th>
    				<th>年龄</th>
    			</tr>
    			<tr>
    				<td>
    					<input type="checkbox" class="item" />
    				</td>
    				<td>1</td>
    				<td></td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>
    					<input type="checkbox" class="item" />
    				</td>
    				<td>2</td>
    				<td></td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>
    					<input type="checkbox" class="item" />
    				</td>
    				<td>3</td>
    				<td></td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>
    					<input type="checkbox" class="item" />
    				</td>
    				<td>4</td>
    				<td></td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>
    					<input type="checkbox" class="item" />
    				</td>
    				<td>5</td>
    				<td></td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>
    					<input type="checkbox" class="item" />
    				</td>
    				<td>6</td>
    				<td></td>
    				<td></td>
    			</tr>
    		</table>
    	</body>
    	<script type="text/javascript">
    		/*
    		 * 需求:单选:【选中状态保持一致】
    		 * ======和	反选:【选中状态保持一致】一样的,只是去掉了 反选。
    		 * ======【这一版:每个单选的item和事件动态绑定 方式 实现。
    		 * HTML里每个item不再需要 都要加上onclick。】
    		 * 被选中的取消选中,没有选中的设置为选中(这是CheckBox自带功能)
    		 */
    	
    			window.onload = function Syc () {
    				var items = document.getElementsByClassName("item");
    				//====为每个item动态绑定 事件处理方法。
    				for(var i=0; i<items.length; i++){
    			 //items[i].checked = !items[i].checked;
    			 /*反选之后,判断所有属性值,有false,则checkAll为false;反之为true*/
    //			 items[i].onclick = function Syc2(){
    			 items[i].onchange = function Syc2(){
    			 	//设置所有item的选中状态与checkall的选中状态一致
    			//获取checkall的选中状态  
    			//var checkallState = document.getElementById("checkall").checked;
    			var checkallBtn = document.getElementById("checkall");
    			//获取到所有的item
    			var items = document.getElementsByClassName("item");
    			
    			var flag = true;
    			for(var i=0; i<items.length; i++){
    			 //items[i].checked = !items[i].checked;
    			 /*反选之后,判断所有属性值,有false,则checkAll为false;反之为true*/
    			 if (!items[i].checked) {
    			 	flag = false;
    			 	break;
    			 }
    			}  
    			//===反选:【选中状态保持一致】。
    //			alert(flag);
    			if (!flag) {
    				/*//==######=【可以了】【试了一晚上。看来JS属性的意义 和数据类型有关】==========*/
    				checkallBtn.checked = undefined;//==######=【可以了】
    				//checkallBtn.checked = null;//===【只有第一次可以,不可以了】
    			}else{
    				//checkallBtn.setAttribute("checked","checked");
    				//====#####==最后一个Bug====【第二次全选,全选按钮,又选不上了。==已解决?】
    				checkallBtn.checked="checked";//=======【时灵,时不灵】
    			}
    			};
    			}
    			}
    			
    		function checkSyc(){//===ok
    			//设置所有item的选中状态与checkall的选中状态一致
    			//获取checkall的选中状态
    			//var checkallState = document.getElementById("checkall").checked;
    			var checkallBtn = document.getElementById("checkall");
    			//获取到所有的item
    			var items = document.getElementsByClassName("item");
    			
    			var flag = true;
    			for(var i=0; i<items.length; i++){
    			 //items[i].checked = !items[i].checked;
    			 /*反选之后,判断所有属性值,有false,则checkAll为false;反之为true*/
    			 if (!items[i].checked) {
    			 	flag = false;
    			 	break;
    			 }
    			}
    			//===反选:【选中状态保持一致】。
    			//alert(flag);
    			if (!flag) {
    				/*//==######=【可以了】【试了一晚上。看来JS属性的意义 和数据类型有关】==========*/
    				checkallBtn.checked = undefined;//==######=【可以了】
    				//checkallBtn.checked = null;//===【只有第一次可以,不可以了】
    			}else{
    				//checkallBtn.setAttribute("checked","checked");
    				//====#####==最后一个Bug====【第二次全选,全选按钮,又选不上了。==已解决?】
    				checkallBtn.checked="checked";//=======【时灵,时不灵】
    			}
    			
    			//==###=【改进:】无论是反选,单选,没有选满时,不需要对全选按钮进行处理。
    			
    		}
    		
    		
    		
    		/*
    		 * 需求:反选
    		 * 点击反选按钮,把item里的复选框,被选中的取消选中,没有选中的设置为选中
    		 * 
    		 * 暗含:===反选:【选中状态保持一致】。
    		 */
    		function checkInverse(){//===ok
    			//设置所有item的选中状态与checkall的选中状态一致
    			//获取checkall的选中状态
    			//var checkallState = document.getElementById("checkall").checked;
    			var checkallBtn = document.getElementById("checkall");
    			//获取到所有的item
    			var items = document.getElementsByClassName("item");
    			
    			var flag = true;
    			for(var i=0; i<items.length; i++){
    			 items[i].checked = !items[i].checked;
    			 /*反选之后,判断所有属性值,有false,则checkAll为false;反之为true*/
    			 if (!items[i].checked) {
    			 	flag = false;
    			 }
    			}
    			//=======反选:【选中状态保持一致】。
    			//alert(flag);
    			if (!flag) {
    				/*=====失败案例:
    				 * checkallBtn.checked = false;
    				checkallBtn.removeAttribute("checked");*/
    				/*//==######=【可以了】【试了一晚上。看来JS属性的意义 和数据类型有关】==========*/
    				//checkallBtn.checked = undefined;//==######=【可以了】
    				checkallBtn.checked = null;//===【只有第一次可以,不可以了】
    			}else{
    				//checkallBtn.setAttribute("checked","checked");//===第二次不行。
    				//====#####==最后一个Bug====【第二次全选,全选按钮,又选不上了。==已解决?】
    				checkallBtn.checked="checked";//【可以了】=======【时灵,时不灵】
    				
    				/*==========问题:======?
    				使用:checkallBtn.setAttribute("checked","checked");,第二次(反选或选满时)全选按钮 选不上;
    				而使用作用相同的checkallBtn.checked="checked";		却功能正常(至少目前这样)。
    				【问题产生原因?】
    				checkallBtn.setAttribute("checked","checked")和
    				checkallBtn.checked="checked";区别?
    				=====
    				* */
    			}
    		}
    		
    		
    		//点击checkall,设置所有的item的选中状态
    		function checkAll(){
    			//设置所有item的选中状态与checkall的选中状态一致
    			//获取checkall的选中状态
    			var state = document.getElementById("checkall").checked;
    			//获取到所有的item
    			var items = document.getElementsByClassName("item");
    			for(var i=0; i<items.length; i++){
    				items[i].checked = state;
    			}
    		}
    	
    		//获取所有行
    		var rows = document.getElementsByTagName("tr");
    		for(var i=0; i<rows.length; i++){
    			if(i==0){
    				continue;
    			}
    			if(i%2==0){
    				rows[i].style.backgroundColor = "lightblue";
    			}else{
    				rows[i].style.backgroundColor = "lightgreen";
    			}
    		}
    	</script>
    </html>
    


    展开全文
  • javascript如何控制input的checked属性由于我不懂JS语言,只能尽量描述,问题应该比较菜,还望看到的朋友能够 var radiovar = document.getElementsByName("a"); for(var i=0;i如何监听checkbox的checked属性如何...

    javascript如何控制input的checked属性

    由于我不懂JS语言,只能尽量描述,问题应该比较菜,还望看到的朋友能够 var radiovar = document.getElementsByName("a"); for(var i=0;i

    如何监听checkbox的checked属性

    bd3ce4528f7199aca69ca3a789f0d5fb.png

    如何监听checkbox的prop("checked")属性 也就是当程序中出现prop("checkExt.onReady(function() { /* 转换数据库数据,判断是否选中 */ function convertData(initData,valueData){ var items = new Array(); for(var i=0;i

    checkbox类型的input的checked值为true了,为什么没解答

    jquery怎样将check值改变

    思路: 复选框的check值改变实际是改变checkbox的checked属性,即使用jQuery改变元素的属性 当checkbox存在checked属性时,checkbox会被打钩,标准写法是checked="checked" jQuery中有attr函数,该函数可以改变元素的属性。

    在ext中如何动态设置checkbox的checked属性。

    我是用循环根据后台返回数据动态创建多个checkbox的 (默认为未选),还首先你要请确保每一个checkbox都有一个唯一的id,例如: boxLabel : '新增', id:"add", anchor:"50%", name : '新增' Ext.getCmp.setValue(true);设置为选中状态 Ext.getCmp.setValue(false);设置为未选中状态

    js为input 设置checkbox元素属性并设为选中状态

    定义一个checkbox节点 1

    根据id获取checkbox节点 1 var chk = document.getElementById('iptchk');//通过getElementById获取节点

    展开全文
  • 今天无意中看到同事在学习复选框里面的checked属性的应用,当时看了一下,感觉熟悉而又陌生,发现checked属性其实还是挺奇怪的,感觉这里很有必要做一下笔记:  1、html中的checked属性。仔细研究下会发现一个很...

    今天无意中看到同事在学习复选框里面的checked属性的应用,当时看了一下,感觉熟悉而又陌生,发现checked属性其实还是挺奇怪的,感觉这里很有必要做一下笔记:

     

      1、html中的checked属性。仔细研究下会发现一个很怪异的现象。

      

      你知道上面这四个复选框到底那些被选中了?那些没被选中吗?

      其实乍一看我也不知道结果,运行完后也想不通为什么,查看资料才发现确实是那样的。

      结果是:

      

     

      其实原理是这样的,复选框里只要有checked属性,不管是否为其赋值,结果为空或true或false或任意值,均为选中状态。

      

      2、利用javascript操作checked来控制复选框是否选中。

      

      结果:

      

      要使其不选中,即设置checked属性值为false。

     

      3.利用jQuery操作checked来控制复选框选中与否。

      

      结果第一个复选框选中。

      相反的,checked属性值设为false就是未选中了

      

      这里需注意:

      无论是用javascript还是jQuery来操作checked属性,其值均为true或false,切忌带引号,否则会出错。

     

       补充:获取复选框是否选中问题:

      例如,有这样一个例子,我要获取这三个复选框是否选中:

    1

    2

    3

    <input type="checkbox" name="checkbox1" id="checkbox1" checked>看书

    <input type="checkbox" name="checkbox2" id="checkbox2">电影

    <input type="checkbox" name="checkbox3" id="checkbox3" checked>爬山

      在js中,我们可以这样来写:

    1

    2

    3

    4

    5

    6

    var checkbox1 = document.getElementById("checkbox1");

    var checkbox2 = document.getElementById("checkbox2");

    var checkbox3 = document.getElementById("checkbox3");

    console.log(checkbox1.checked); // true

    console.log(checkbox2.checked)  // false

    console.log(checkbox3.checked)  // true

      

      在jQuery中,可以这样获取:

    1

    2

    3

    4

    5

    $(function(){

          console.log($("#checkbox1").attr('checked'))  // checked

          console.log($("#checkbox2").attr('checked'))  // undefined

          console.log($("#checkbox3").attr('checked'))  // checked

    })

      从上面例子可以看出同样是获取复选框是否选中,js的获取值是布尔值,即true 或者 false,而jQuery的获取值则是checked或者undefined

    展开全文
  • 复选框checked属性

    2018-11-02 14:18:00
    1、html中的checked属性。仔细研究下会发现一个很怪异的现象。   ... 其实原理是这样的,复选框里只要有checked属性,不管是否为其赋值,结果为空或true或false或任意值,均为选中状态。  ...
  • 如果input没有初始定义checked属性, 那么$(this).attr('checkbox'); 它永远返回的是undefined; 如果input初始定义了checked属性, 那么$(this).attr('checkbox'); 它永远返回的的是checked; $(this).prop('...
  • 复选框checked

    2019-03-15 09:11:41
    为了选中复选框,添加dto字段checked来作为标签属性 SELECT *,NOT ISNULL(bb.id) checked FROM bid_filetype bf LEFT JOIN bid_bidprojectfilet bb ON bb.filetype=bf.id AND bb.bidid = #{value} where bf.id !=1 ...
  • 复选框checked 选中后不显示打钩 checkbox属性checked="checked"已有,但复选框却不显示打钩的原因 复选框绑定了click事件,点一次选中,再点击取消选中, 第一次,可以正常显示选中和取消,但当再去选中的时候...
  • layui获取复选框checked

    千次阅读 2020-04-13 00:30:30
    对于后台开发来讲,layui是一个很后台的前端框架,适合搭建管理后台,各方面都很好,唯独有个地方不好,就是checkbox多选方面,不能直接返回多选值,只能返回最后的一个,这究竟是官方的bug还是有意为之我们也无从...
  • jquery添加属性checked不管用(jquery,prop的使用) $("#xxx").attr("checked","checked"); 但是页面上并没有选中,换成 $("#xxx").prop("checked","checked"); 选中ok. 这里用attr只是为元素...
  • java web 复选框checked

    2014-11-27 16:47:00
    熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了。博主之前用户不少方法,经常Google到一些这个不好那个不好的文章...
  • 解决复选框checked=checked无效问题

    千次阅读 2016-12-15 14:20:00
    第一遍勾选和取消是有效的,但是第二遍以后就没反应了,查看了属性,发现checked属性一直存在,但是没显示勾。就考虑移除checked属性看看。 function check(id,check) { if (check) { $("." + id).find("input...
  • 一个列表里的几行数据,每行数据前都有一个复选框,默认为不选中状态,点击某行的时候会设置当前行前复选框checked属性为true,但是对应的change事件并不执行,如果直接点击某行的复选框,change事件就执行了,...
  • layui 复选框checked获取值和赋值

    千次阅读 2020-07-10 11:53:46
    i++) { if (unitTypeCheckbox[i].value == unitType[j]) { unitTypeCheckbox[i].checked = true; } } } form.val('systemForm', data.data); }); ajax.start(); // 系统表单提交事件 form....
  • 我们都知道如何在HTML中形成一个复选框输入:我不知道 - 复选复选框的技术正确值是什么? 我看到这些都有效:答案是无关紧要的吗? 我没有看到证据证明答案在规范中标记为正确:Checkboxes (and radio buttons) are ...
  • 我是分级菜单,当父菜单勾选,其下所有子菜单自动勾选,反之亦然,这个怎么实现的?
  • Web前端之复选框选中属性

    千次阅读 2014-11-27 11:26:47
    Web前端之复选框选中属性  熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了。博主之前用户不少方法,经常...
  • //根据当前复选框的状态设置其它行复选框的状态 $('#list :checkbox').attr('checked', this.checked); //隐私迭代,选择器中的所有jquery对象的checked属性都设置成 #chkAll 的checked值。 }); //反选。 $...
  • 复选框input=checkbox ➢ 问题 使用Jquery设置checked属性,取消选中后无法再次选中. checked属性有但是不生效 只有第一次生效其他不生效 ➢ 解决 选中复选时,使用prop设置属性,在at...
  • 来控制复选框的选中和取消的时候,第一遍加上和取消勾是正常的,第二遍的时候,可以加上checked=”checked属性,但是却不显示打勾。解决办法是,使用$(#id).prop('checked', true);和$(#id).prop('checked', false...
  • 一、需求步骤–实现表格首行复选框全选反选功能 1、当表格第一行thead标签内复选框选中,则...1、thead复选框checked属性与tbody复选框一致,var tbody复选框[i] = this.thead复选框.checked; 2、每选中一个tbody内的复
  • checked 复选框的选中事件

    千次阅读 2019-01-02 23:47:57
    2、监听复选框的是选中事件$('.inter-pay-input').change(function () {} 3、监听事件是否被选中$('.inter-pay-input').is(':checked') 4、设置复选框不能被选中$('.costinter-input').pro...
  • 页面效果 目的 点击1复习框,则复选框2的状态都随之改变 ... ...1是为了点击此复选框跳转到响应...复选框状态响应函数 2就是跳转的函数 3表示:对class属性值为itemSelect元素,进行元素属性值更改,把checked...
  • js---复选框的回显

    2017-05-26 10:10:02
    3、对复选框的值与需要回显的值进行判断,相同则赋予复选框checked属性true值 JS代码$.post(url,data,function(database){ var userObj = database.rows; //后台返回的数据中rows含有对象,对象中roleId属性与复选...
  • 这个功能在ie中没问题,但是在firefox中测试的时候,前两次都没有问题,可以正常显示选中和取消,但当再去选中的时候,复选框属性checkbox值变为"checked",没问题,但是复选框却不在显示选中状态,明明属性值改了...
  • 但当再去选中的时候,复选框属性checkbox值变为"checked",属性改变没问题,但是复选框却不再显示选中状态, 继续点还是没有效果 代码修改了却得不到想要的效果,纠结了很久, 网上的资料说的七弯八绕的 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,520
精华内容 16,608
关键字:

复选框checked属性