html篇--實現複選框單選
阿新 • • 發佈:2019-01-08
html程式碼
<form name="checkbox_redio"> <input type="checkbox" th:selected="${thing=='1'}" class="taskListbox" name="checkbox_content" onClick="javascript:check_object_like_radio(0)"> <span class="thing_chi" name="checkbox_content" onClick="javascript:check_object_like_radio(0)">待辦事項</span> <input type="checkbox" th:selected="${thing=='1'}" class="taskListbox" name="checkbox_content" onClick="javascript:check_object_like_radio(1)"> <span class="thing_chi" name="checkbox_content" onClick="javascript:check_object_like_radio(0)">已完事項</span> </form>
css程式碼
span.thing_chi{
font-size: 18px;
color: #9a9a9a;
position:relative;
top:-4px;
margin-left:-9px;
}
input.taskListbox{
margin:10px 10px 15px;
height: 20px;
width: 20px;
}
js程式碼
function check_object_like_radio(cb) { for (j = 0; j < 8; j++) { if (eval("document.checkbox_redio.checkbox_content[" + j + "].checked") == true) { document.checkbox_redio.checkbox_content[j].checked = false; if (j == cb) { document.checkbox_redio.checkbox_content[j].checked = true; } } } }
效果如下