<label> <input type="checkbox" name="test" value="Hello World"> Test </label>
h1 + p { color: red; } /* tag <p> ที่อยู่หลัง tag <h1> จะมีสีข้อความเป็นสีแดง เช่น <h1>Hello World</h1> <p>This will be red!</p> */
<style> input[type="checkbox"] { display: none; } input[type="checkbox"] + span { cursor: pointer; } // span ที่อยู่หลัง checkbox จะมีสีแดงเมื่อ checkbox มีสถานะเป็น checked input[type="checkbox"]:checked + span { color: red; } </style> ... <label> <input type="checkbox" name="test" value="Hello World"> <span>Test</span> <!-- <span> อันนี้จะเป็นจุดที่สามารถคลิกได้แทน checkbox เพราะถูกครอบด้วย <label> --> </label>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { font-family: sans-serif; } /* ให้ element ที่มี class img-checker ถูกซ่อนไว้ */ .img-checker { display: none; } /* ให้ <img> ที่ตามหลัง element ที่มี class img-checker แสดงผลแบบจาง และใช้ cursor รูปมือเมื่อผู้ใช้เอาเมาส์ไปชี้ */ .img-checker + img { opacity: 0.5; cursor: pointer; } /* ให้ <img> ที่ตามหลัง element ที่มี class img-checker กลับมาแสดงผลแบบปกติ เมื่อ element ที่มี class img-checker มีสถานะเป็น checked */ .img-checker:checked + img { opacity: 1.0; } </style> </head> <body> <h3>Checkboxes</h3> <form> <label> <input type="checkbox" name="test[]" value="All" class="img-checker"> <img src="https://www.thaicreate.com/images/resource/all.png?v=1001"> </label> <label> <input type="checkbox" name="test[]" value="PHP" class="img-checker"> <img src="https://www.thaicreate.com/images/resource/php.png?v=1001"> </label> <label> <input type="checkbox" name="test[]" value="ASP" class="img-checker"> <img src="https://www.thaicreate.com/images/resource/asp.png?v=1001"> </label> <label> <input type="checkbox" name="test[]" value=".NET" class="img-checker"> <img src="https://www.thaicreate.com/images/resource/dotnet.png?v=1001"> </label> <label> <input type="checkbox" name="test[]" value="Java" class="img-checker"> <img src="https://www.thaicreate.com/images/resource/java.png?v=1001"> </label> <label> <input type="checkbox" name="test[]" value="Mobile" class="img-checker"> <img src="https://www.thaicreate.com/images/resource/mobile.png?v=1001"> </label> <br> <br> <input type="button" onclick="alert(Array.prototype.slice.call(this.form.elements['test[]']).map(function (i) { return i.checked ? i.value : false; }).filter(Boolean));" value="Check Values"> </form> <hr> <h3>Radios</h3> <form> <label> <input type="radio" name="test" value="All" class="img-checker"> <img src="https://www.thaicreate.com/images/resource/all.png?v=1001"> </label> <label> <input type="radio" name="test" value="PHP" class="img-checker"> <img src="https://www.thaicreate.com/images/resource/php.png?v=1001"> </label> <label> <input type="radio" name="test" value="ASP" class="img-checker"> <img src="https://www.thaicreate.com/images/resource/asp.png?v=1001"> </label> <label> <input type="radio" name="test" value=".NET" class="img-checker"> <img src="https://www.thaicreate.com/images/resource/dotnet.png?v=1001"> </label> <label> <input type="radio" name="test" value="Java" class="img-checker"> <img src="https://www.thaicreate.com/images/resource/java.png?v=1001"> </label> <label> <input type="radio" name="test" value="Mobile" class="img-checker"> <img src="https://www.thaicreate.com/images/resource/mobile.png?v=1001"> </label> <br> <br> <input type="button" onclick="alert(this.form.elements.test.value);" value="Check Value"> </form> </body> </html>
Load balance : Server 00
