JQuery是一個廣泛運用的Javascript庫,可以使開發者能夠輕松地操縱HTML文檔、處理動畫、添加特效等等。其中,jQuery checkbox(復選框)是一種常用的表單控件,因為在一個表單中,用戶可能需要同時選擇多個選項。下面我們來談談如何使用jQuery實現復選框選中數量的計數功能。
// HTML代碼 <input type="checkbox" class="myCheck" name="option1" value="1" />選項1 <input type="checkbox" class="myCheck" name="option2" value="2" />選項2 <input type="checkbox" class="myCheck" name="option3" value="3" />選項3 <p>已選中 <span id="checkNum">0</span> 個復選框。</p> // JQuery代碼 $(document).ready(function() { var checkNum = 0; $("input.myCheck").click(function() { if($(this).prop("checked")) { checkNum++; } else { checkNum--; } $("#checkNum").html(checkNum); }); });
如上代碼所示,我們首先給復選框加了相同的類名"myCheck",以便用jQuery選擇器來選中所有的復選框。然后我們再加一個計數器checkNum,初始值為0。當每個復選框被點擊時,我們通過jQuery的prop()方法獲取復選框是否被選中,如果選中了,計數器就自增1,反之就自減1。最后,我們使用jQuery的html()方法,來將當前的選中數量展示到頁面上。
總之,使用jQuery實現復選框選中數量的計數功能,只要掌握好上面的代碼,就可以輕松操縱了!