smart-for
/
checked.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单复选框选中态的检测</title>
<style>
.active {
	color: red;
}
.result {
	font-size: 87.5%;
	color: #555;
}
.result::after { margin-left: 30px; color:#fff; padding: 5px; }
.success::after { content: '测试通过√'; background-color: green; }
.error::after { content: '测试失败×'; background-color: red; }
button { width: 150px; height: 40px; font-size: medium; margin-top: 40px; }
output:empty::before { content: '测试尚未开始'; color: gray; }
</style>
</head>

<body>
<h2>测试</h2>
<ol>
	<li>
    	<p><input id="checkbox1" type="checkbox"><label for="checkbox1">复选框1</label></p>
		<p id="result1" class="result">预期“复选框1”文字颜色黑色，测试结果是：<output data-expect="rgb(0,0,0)"></output></p>
    </li>
    <li>
    	<p><input id="checkbox2" type="checkbox" checked><label for="checkbox2">复选框2</label></p>
		<p id="result2" class="result">预期“复选框2”文字颜色红色，测试结果是：<output data-expect="rgb(255,0,0)"></output></p>
    </li>
    <li>
    	<p><input id="checkbox3" type="checkbox"><label for="checkbox3">复选框3-1</label> <label for="checkbox3">复选框3-2</label></p>
		<p id="result3" class="result">执行click()选中，预期两段文字均红色，测试结果是：<output data-expect="rgb(255,0,0)"></output></p>
    </li>
    <li>
    	<p><input id="checkbox4" type="checkbox"><label for="checkbox4">复选框4-1</label> <label for="checkbox4">复选框4-2</label></p>
		<p id="result4" class="result">执行check=true选中，预期两段文字均红色，测试结果是：<output data-expect="rgb(255,0,0)"></output></p>
    </li>
    <li>
    	<p><input id="checkbox5" type="checkbox"><label for="checkbox5">复选框5-1</label> <label for="checkbox5">复选框5-2</label></p>
		<p id="result5" class="result">执行<code>setAttribute('checked', '')</code>选中，预期两段文字均红色，测试结果是：<output data-expect="rgb(255,0,0)"></output></p>
	</li>
	<li id="list6">
		<label for="checkbox6">复选框6</label>
		<p id="result6" class="result">插入选中态复选框，预期文字红色，测试结果是：<output data-expect="rgb(255,0,0)"></output></p>
	</li>
	<li>
		<input id="checkbox7" type="checkbox" checked>
		<p id="result7" class="result">插入span元素，预期文字红色，测试结果是：<output data-expect="rgb(255,0,0)"></output></p>
	</li>
	<li>
		<input id="checkbox8" type="checkbox" checked><label for="checkbox8">复选框8</label>
		<p id="result8" class="result">删除复选框，预期文字颜色红色变黑色，测试结果是：<output data-expect="rgb(0,0,0)"></output></p>
	</li>
	<li>
		<p><input id="radio1" type="radio" name="item" checked><label for="radio1">单选框1</label></p>
		<p><input id="radio2" type="radio" name="item"><label for="radio2">单选框2</label></p>
		<p id="result9" class="result">“单选框1”红色，测试后“单选框1”黑色，测试结果是：<output data-expect="rgb(0,0,0)"></output>，“单选框2”红色，测试结果是：<output data-expect="rgb(255,0,0)"></output></p>
	</li>
	<li>
		<label><input type="checkbox">没有ID，label在外，手动点击这段文字进行测试，选中时预期红色</label>
	</li>
</ol>


<button id="testButton">开始测试</button>

<script src="smart-for.js"></script>
<script>
var testBasic = function (index) {
	var labels = document.querySelectorAll('[for="checkbox' + index + '"]');
	var result = document.querySelector('#result' + index);
	var output = result.querySelector('output');
	// 预期结果和实际结果
	var expect = output.dataset.expect;
	// 所有label颜色
	var arrActual = [];
	labels.forEach(function (label) {
		arrActual.push(getComputedStyle(label).color.toLowerCase().replace(/\s/g, ''));
	});
	output.textContent = '预期' + expect + '，实际' + arrActual.join();

	if (arrActual.every(function (actual) {
		return actual === expect;
	})) {
		result.classList.add('success');
	} else {
		result.classList.add('error');
	}
};

var testRadio = function () {
	var label1 = document.querySelector('label[for="radio1"]');
	var label2 = document.querySelector('label[for="radio2"]');

	var output1 = document.querySelector('#result9 output:first-child');
	var output2 = document.querySelector('#result9 output:last-child');

	var color1 = getComputedStyle(label1).color.toLowerCase().replace(/\s/g, '');
	var color2 = getComputedStyle(label2).color.toLowerCase().replace(/\s/g, '');

	output1.textContent = '预期' + output1.dataset.expect + '，实际' + color1;
	output2.textContent = '预期' + output2.dataset.expect + '，实际' + color2;

	if (output1.dataset.expect == color1 && output2.dataset.expect == color2) {
		result9.classList.add('success');
	} else {
		result9.classList.add('error');
	}
};

testButton.onclick = function () {
	// 复选框1, 2测试
	testBasic(1);
	testBasic(2);
	// 复选框3测试
	checkbox3.click();
	testBasic(3);
	// 复选框4测试
	checkbox4.checked = true;
	testBasic(4);
	// 复选框5测试
	checkbox5.setAttribute('checked', '');
	// testBasic(5);
	// 复选框6测试
	list6.insertAdjacentHTML('afterbegin', '<input type="checkbox" id="checkbox6" checked>');
	//testBasic(6);
	// 复选框7测试
	checkbox7.insertAdjacentHTML('afterend', '<span for="checkbox7">复选框7</span>');
	//testBasic(7);
	// 复选框8测试
	if (checkbox8.remove) {
		checkbox8.remove();
	} else {
		checkbox8.parentElement.removeChild(checkbox8);
	}

	//testBasic(8);
	// 5-8测试检测异步，因此，定时器
	setTimeout(function () {
		testBasic(5);
		testBasic(6);
		testBasic(7);
		testBasic(8);
	}, 17);

	// 单选框组测试
	radio2.checked = true;
	testRadio();
}


</script>
</body>
</html>