Question

When i am setting the property 'checked' of a checkbox element it does not reflect in the checkbox being chcked, but on setting the attribute it does get checked why?

On clicking the box above the checkbox element, if i use the setAttribute function it works but on changing the element property through the event callback function the property does not get set.

Why does this happen? Is there a way to set the property via Javascript only?

Not interested in jQuery solutions, only vanilla javascript.

Does not work Where 'e' is the input type='checkbox' element

e['checked'] = false; or e.checked = false;

Works

` e.setAttribute('checked','checked')`; e.removeAttribute('checked');`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
	<HEAD>
		<TITLE></TITLE>
		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--[if !mso]><!-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!--<![endif]-->		
	</HEAD>
<BODY>
<form action="">
  First name:<br><input type="text" name="" value=""><br>
  Last name:<br><input type="text" name="" value=""><br>
  <br><label for="1">Value 1<input id ="1" type="checkbox" name="d1" value="Value 1"></label>
  <br><label for="2">Value 2<input id ="2" type="checkbox" name="d2" value="Value 2"></label>
  <br><label for="3">Value 3<input id ="3" type="checkbox" name="d3" value="Value 3" checked></label>
  <br><br><input type="submit" value="Submit">
</form> 

</BODY>
<style>
.CheckTickBox-cTrue{
	width:16px;
	height:16px;
	background-color:#558B2F;
	padding:4px;
	border-radius:3px;
}
.CheckTickBox-cFalse{
	width:16px;
	height:16px;
	background-color:#cccccc;
	padding:4px;
	border-radius:3px;
}
.CheckTickBox-iTrue{
	width:16px;
	height:16px;
}
.CheckTickBox-iFalse{
	width:16px;
	height:16px;
}
</style>
<SCRIPT TYPE="text/javascript">
function CheckTickBox(p){
	var d,t,i,m,e = [],r;
	if(p.src){
		if(p.src == '*'){
			if(t = document.getElementsByTagName('input')){
				for(i=0; i< t.length; i++){(t[i].type && t[i].type == 'checkbox') && e.push(t[i]);}
			}else {
				return;
			}
		}else if(p.src.sort){
			for(i=0; i<= p.src.length; i++){(p.src[i].type && p.src[i].type == 'checkbox') && e.push(p.src[i]);}
		}else if(p.src.nodeType == '1' && p.src.type == 'checkbox'){
			e.push(p.src);
		}else{
			return;
		}
	}
	function tcb(e,d,i){
		e = e.currentTarget['CheckTickBox-element'];
		switch(e.checked){
			case true:
				e['checked'] = false;
				//e.setAttribute('checked','checked');
				a = 'True';
				b = 'False';
				console.log(e.checked);
				break;
			case false:
				e['checked'] = true;
				//e.removeAttribute('checked');
				a = 'False';
				b = 'True';
				console.log(e.checked);
				break;
		}
		d = e['CheckTickBox-div'];
		d.classList.remove(d['CheckTickBox-class']['c'+a]);
		d.classList.add(d['CheckTickBox-class']['c'+b]);
		i = e['CheckTickBox-img'];
		i.classList.remove(d['CheckTickBox-class']['i'+a]);
		i.classList.add(d['CheckTickBox-class']['i'+b]);
		i.src = d.img['i'+b];
	}
	for(i=0; i< e.length; i++){
		(d = document.createElement('div')).classList.add((e[i].checked == true) ? p.css.cTrue : p.css.cFalse);
		d.appendChild(m = document.createElement('img')).src = ((e[i].checked == true) ? p.img.iTrue : p.img.iFalse);
		m.classList.add((e[i].checked == true) ? p.css.iTrue : p.css.iFalse);
		e[i].parentNode.insertBefore(d,e[i]);
		d['CheckTickBox-class'] = p.css;
		d['img'] = p.img;
		d['CheckTickBox-element'] = e[i];
		e[i]['CheckTickBox-div'] = d;
		e[i]['CheckTickBox-img'] = m;
		d.addEventListener('click',tcb,false);
	}
}
CheckTickBox({
	src:'*',
	img:{
		iTrue:'img/tick.png',
		iFalse:'img/cross.png'
	},
	css:{
		cTrue:'CheckTickBox-cTrue',
		cFalse:'CheckTickBox-cFalse',
		iTrue:'CheckTickBox-iTrue',
		iFalse:'CheckTickBox-iFalse'
	},
});
</SCRIPT>
</HTML>

Answer 1

您的代码库有问题，因为它没有正确设置值。设置元素的checked属性可以正常工作。这是在代码库中进行部分修改的示例。

<form action="">
  First name:<br><input type="text" name="" value=""><br>
  Last name:<br><input type="text" name="" value=""><br>
  <br><label for="1">Value 1<input id ="1" type="checkbox" name="d1" value="Value 1"></label>
  <br><label for="2">Value 2<input id ="2" type="checkbox" name="d2" value="Value 2"></label>
  <br><label for="3">Value 3<input id ="3" type="checkbox" name="d3" value="Value 3" checked></label>
  <br><br><input type="submit" value="Submit">
</form> 

<SCRIPT TYPE="text/javascript">
  let el1 = document.getElementById("1");
  let el2 = document.getElementById("2");
  let el3 = document.getElementById("3");
  el1.checked = true;
  el2.checked = true;
  el3.checked = true;
</SCRIPT>

Javascript setting 'checked' property of element does not reflect in DOM?

1 个答案:

Javascript setting &#39;checked&#39; property of element does not reflect in DOM?

1 个答案:

Javascript setting 'checked' property of element does not reflect in DOM?