checkbox全选、清除、反选
生活随笔
收集整理的這篇文章主要介紹了
checkbox全选、清除、反选
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<div id="choose"><label style="font-size: 17px;font-weight: 100"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_erbihou_erbihou" />耳鼻喉</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_erbihou_tingli" />聽力</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_erbihou_xiujue" />嗅覺</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_gangongneng" />肝功能</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_jiwangbingshi" />既往病史</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_kouqiang_chune" />唇顎</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_kouqiang_kouchi" />口吃</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_kouqiang_yachi" />牙齒</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_ganzang" />肝臟</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_huxi" />呼吸</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_pizang" />脾臟</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_shenjing" />神經</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_xinzangxueguan" />心臟血管</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_xueya" />血壓</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_yingyang" />營養</label><br/><label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_tineihanjinshu" />體內含金屬</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_guanjie" />關節</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_jingxiongbu" />頸胸部</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_jizhu" />脊柱</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_pifulinbajie" />皮膚淋巴結</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_sizhi" />四肢</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_toumianbu" />頭面部</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_shengao" />身高</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_tizhong" />體重</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_xiongbutoushi" />胸部透視</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_yanjing_jiaozheng" />矯正</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_yanjing_luoyan" />裸眼</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_yanjing_sejue" />色覺</label> <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_yanjing_yanbing" />眼病</label> </div><input type="button" value="全選" class="btn" id="selectAll"/><input type="button" value="清空" class="btn" id="unSelect"/><input type="button" value="反選" class="btn" id="reverse"/>
</div>
?
//點擊全選 $("#selectAll").click(function () {$("#choose input[name='tjx']").prop("checked", true);}); //點擊全不選$("#unSelect").click(function () {$("#choose input[name='tjx']").prop("checked", false);}); //反選 $("#reverse").click(function () {$("#choose input[name='tjx']").each(function () {$(this).prop("checked", !$(this).prop("checked"));});allchk(); });//函數allchk()就是用來檢測全選框#checkAll應該是選中狀態還是未選中狀態的 function allchk(){var chknum = $("#choose input[name='tjx']").size();//選項總個數var chk = 0;$("#choose input[name='tjx']").each(function () {if($(this).prop("checked")==true){chk++;}}); } //獲得所有選中值 $("#getValue").click(function(){var valArr = "";$("#choose input[name='tjx']").each(function () {if($(this).prop("checked")==true){valArr+= $(this).val()+",";//轉換為逗號隔開的字符串}});alert(valArr); }); // 當checkbox全部選中時，全選按鈕自動選中 $("#choose input[name='tjx']").click(function(){allchk(); });?
總結
以上是生活随笔為你收集整理的checkbox全选、清除、反选的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Rails4升级小记 ← 阳志平的个人网
- 下一篇： 工控自动化方案：和利时LE系列PLC数采