复选框选择全部取消选择并执行功能

我有一堆复选框，单击时将它们的值传递给文本区域。然后我有一个复选框，单击时选中所有其他复选框。这一切工作正常。我想要做的是在单击全选时使复选框执行其功能。它目前工作，但只有当我刷新页面。我希望在选择全部被点击时发生。复选框选择全部取消选择并执行功能

这就是我一直在玩至今：

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

复选框选择全部取消选择并执行功能

回答

相关问题