複選框選擇全部取消選擇並執行功能

我有一堆複選框，單擊時將它們的值傳遞給文本區域。然後我有一個複選框，單擊時選中所有其他複選框。這一切工作正常。我想要做的是在單擊全選時使複選框執行其功能。它目前工作，但只有當我刷新頁面。我希望在選擇全部被點擊時發生。複選框選擇全部取消選擇並執行功能

這就是我一直在玩至今：

function setAllCheckboxes(divId, sourceCheckbox) { 
    divElement = document.getElementById(divId); 
    inputElements = divElement.getElementsByTagName('input'); 
    for (i = 0; i < inputElements.length; i++) 
$('.checkbox').each(function() { 
       this.checked = true; 
       this.click();    
      }); 
{ 
     if (inputElements[i].type != 'checkbox') 
      continue; 
     inputElements[i].checked = sourceCheckbox.checked; 
    } 
}

來源

2017-02-19 Greg

這不可能是實際的腳本，因爲這將引發一個語法錯誤：'未捕獲的語法錯誤：非法繼續statement' – Andreas

可能的複製[如何手動觸發onchange事件？]（http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually） –

對不起，如果這是重複的。我做了搜索，但顯然錯過了那些。我在另一個網站的評論部分找到了代碼的這一部分，我正在閱讀其中以找到答案。 '（'。checkbox'）。each（function（）{ this.checked = true; this.click（）; }）;'我不確定它應該去哪裏。 – Greg

，你可以做到這一點沒有循環，使用jQuery的.on()/.trigger()/.change()：

var $result = $('.js-result'); 
 
var $checkboxes = $('.js-checkbox'); 
 
$checkboxes.on('change', function(e) { 
 
    var $checkbox = $(e.target); 
 
    $result.append(
 
     '<div>' + 
 
     $checkbox.closest('.js-label').text() + ' is ' + 
 
     ($checkbox.prop('checked') ? 'checked' : 'unchecked') + 
 
     '</div>' 
 
    ); 
 
}); 
 
$('.js-button').on('click', function() { 
 
    var $this = $(this); 
 
    $checkboxes.prop('checked', !$this.data('checked')); 
 
    $checkboxes.trigger('change'); 
 
    $this.data('checked', !$this.data('checked')) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label class="js-label"> 
 
    <input type="checkbox" class="js-checkbox"/> 
 
    Checkbox 1 
 
</label> 
 
<label class="js-label"> 
 
    <input type="checkbox" class="js-checkbox"/> 
 
    Checkbox 2 
 
</label> 
 
<label class="js-label"> 
 
    <input type="checkbox" class="js-checkbox"/> 
 
    Checkbox 3 
 
</label> 
 
<button type="button" class="js-button">Check/uncheck all</button> 
 

 
<div class="js-result"></div>

JSFiddle

來源

2017-02-19 12:46:36

@Greg我很樂意幫忙！ –

複選框應onchange事件來處理。下面的代碼我發射一個事件，只要複選框以編程方式檢查。

下面如果您已經使用jQuery的代碼可以幫助你

function setAllCheckboxes(divId, sourceCheckbox) { 
    divElement = document.getElementById(divId); 
    inputElements = divElement.getElementsByTagName('input'); 
    for (i = 0; i < inputElements.length; i++) 
$('.checkbox').each(function() { 
       this.checked = true; 
       /* this.click(); */    
       this.fireevent('onChange'); 
       /* or you can call this.onChange(); */ 
      }); 
{ 
     if (inputElements[i].type != 'checkbox') 
      continue; 
     inputElements[i].checked = sourceCheckbox.checked; 
    } 
}

來源

2017-02-19 12:22:42 Liju

我剛剛嘗試了您發佈的代碼，但未選擇任何複選框。不要在JavaScript的閃光對不起。 – Greg

您是否可以發佈html代碼以便更好地理解。 – Liju

這只是一堆'

數據1

'複選框的值在選中該框時通過javascript發送到textaera。 – Greg

如果您僅使用java腳本。下面是非常簡單的運行示例。這會消耗很短的時間不使用任何外部庫在jQuery

HTML代碼

<html> 
    <head> 
     <title>test</title> 
     <script> 
function amend(a) 
{ 
document.getElementById("ta").value += a; 
} 

function checkAll() 
{ 
var textboxes = document.getElementsByClassName("cb"); 
for(i=0;i<textboxes.length;i++) 
{ 
textboxes[i].checked=true; 
textboxes[i].onchange(); 
} 

} 

     </script> 
    </head> 
    <body> 
     <textarea rows="4" cols="50" id="ta"> 
       Below the outputs 
     </textarea> 
     <div id="checkdiv"> 
      <input type="checkbox" onChange="amend(this.value)" value="data to add 1" class="cb">First</input> 
      <br> 
      <input type="checkbox" onChange="amend(this.value)" value="data to add 2" class="cb">Second</input> 
      <br> 
      <input type="checkbox" onChange="amend(this.value)" value="data to add 3" class="cb">Third</input> 
      <br> 
      <input type="checkbox" onChange="checkAll()">Check all</input> 
     </div> 
    </body> 
</html>

來源

2017-02-19 13:20:23 Liju

複選框選擇全部取消選擇並執行功能

回答

相關問題