亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在HTML中實現“選擇所有”復選框?

如何在HTML中實現“選擇所有”復選框?

長風秋雁 2019-07-05 12:57:24
如何在HTML中實現“選擇所有”復選框?我有一個帶有多個復選框的HTML頁面。我還需要一個名為“SELECT ALL”的復選框。選擇此復選框時,必須選中HTML頁面中的所有復選框。我該怎么做?
查看完整描述

3 回答

?
莫回無

TA貢獻1865條經驗 獲得超7個贊

<script language="JavaScript">function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var checkbox in checkboxes)
    checkbox.checked = source.checked;}</script><input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
    <input type="checkbox" name="foo" value="bar1"> Bar 1<br/><input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
    <input type="checkbox" name="foo" value="bar3"> Bar 3<br/><input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

最新情況:

這個for each...in構造在Safari 5或Chrome 5中似乎不起作用,至少在本例中是這樣的。這段代碼應該可以在所有瀏覽器中工作:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }}


查看完整回答
反對 回復 2019-07-05
?
繁花如伊

TA貢獻2012條經驗 獲得超12個贊

使用jQuery:

// Listen for click on toggle checkbox$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }});

HTML:

<input type="checkbox" name="checkbox-1" id="checkbox-1" /><input type="checkbox" name="checkbox-2" id="checkbox-2" />
<input type="checkbox" name="checkbox-3" id="checkbox-3" /><!-- select all boxes --><input type="checkbox" name="select-all" id="select-all" />


查看完整回答
反對 回復 2019-07-05
?
慕斯709654

TA貢獻1840條經驗 獲得超5個贊

我不確定是否有人沒有這樣回答(使用jQuery):

  $( '#container .toggle-button' ).click( function () {
    $( '#container input[type="checkbox"]' ).prop('checked', this.checked)
  })

它是干凈的,沒有循環,也沒有if/etc子句,而且很有魅力。


查看完整回答
反對 回復 2019-07-05
  • 3 回答
  • 0 關注
  • 2081 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號