如何创建一个按钮，以在此Javascript代码中将功能从“全选”更改为“全选”

Question

以下是一段非常不错的代码，带有用于选择一组选择框（ 源 ）的全部或不选择的开关。 对于我计划使用的代码，该代码对我来说非常有效，因为使用此javascript，通过更改脚本中的“ for”值，很容易仅选择一个手动子集而不是表单中的所有复选框。 但是，我需要一个按钮同时选择和取消选择复选框，而不是下面的两个单独的按钮。 在线上还有其他代码示例可以执行此操作，但是与我发现的我无法合并的其他代码示例相比，对于我而言，此代码对于我而言更易理解，并且更具灵活性。 我没有使用javascript的经验。 令我感到沮丧的是，虽然您可能没有那么多经验，但我找不到令人满意的解决方案……希望有人能告诉我如何将下面的代码更改为一个将功能从“全选”更改为一个按钮的按钮。用户单击它或执行具有相同效果的操作后，“不选择”。

<form name="theForm">
My favorite programming/scripting language is:<p>
Select <a href="javascript:selectToggle(true, 'theForm');">All</a> | <a href="javascript:selectToggle(false, 'theForm');">None</a><p>
<input type="checkbox" name="answers[]" value="javascript">JavaScript<p>
<input type="checkbox" name="answers[]" value="perl">Perl<p>
<input type="checkbox" name="answers[]" value="php">PHP<p>
<input type="checkbox" name="answers[]" value="c++">C++
</form>

<script>
function selectToggle(toggle, form) {
     var myForm = document.forms[form];
     for( var i=0; i < myForm.length; i++ ) { 
          if(toggle) {
               myForm.elements[i].checked = "checked";
          } 
          else {
               myForm.elements[i].checked = "";
          }
     }
}
</script>

非常感谢您的帮助。

Answer 1

var isChecked = fasle;

function selectToggle(form) {
     var myForm = document.forms[form];
     for( var i=0; i < myForm.length; i++ ) { 
          if(!isChecked) {
               myForm.elements[i].checked = "checked";
               isChecked = true;
          } 
          else {
               myForm.elements[i].checked = "";
               isChecked = false;
          }
     }
}

您可以使用html之类的

Select <a href="javascript:selectToggle('theForm');">Select/Deselect</a> <p>

Answer 2

您可以在页面范围内使用变量（让其选中），以跟踪上次选择状态。 然后，可以使用选中状态来代替使用参数（代码中的切换参数）。

var checked = false;

function selectToggle(form) {

     var myForm = document.forms[form];
     for( var i=0; i < myForm.length; i++ ) { 
          if(checked) {
               myForm.elements[i].checked = "checked";
          } 
          else {
               myForm.elements[i].checked = "";
          }
     }
     checked = !checked;
}

Answer 3

改成

<form name="theForm">
My favorite programming/scripting language is:<p>
Select <a href="javascript:selectToggle('theForm');"><span id="selection">All</span></a><p>
<input type="checkbox" name="answers[]" value="javascript">JavaScript<p>
<input type="checkbox" name="answers[]" value="perl">Perl<p>
<input type="checkbox" name="answers[]" value="php">PHP<p>
<input type="checkbox" name="answers[]" value="c++">C++
</form>

<script>
var selected=false;
function selectToggle(form) {
    var myForm = document.forms[form];
    for( var i=0; i < myForm.length; i++ ) { 
         if(selected) {
              myForm.elements[i].checked = "checked";
              document.getElementById("selection").innerHTML="None";
         } 
         else {
               myForm.elements[i].checked = "";
              document.getElementById("selection").innerHTML="All";
         }
         selected=!selected;
     }  
}

Answer 4

将表格更改为

<form name="theForm">
My favorite programming/scripting language is:<p>
Select <a id="allLink" href="javascript:selectToggle('theForm');">All</a><p>
<input type="checkbox" name="answers[]" value="javascript">JavaScript<p>
<input type="checkbox" name="answers[]" value="perl">Perl<p>
<input type="checkbox" name="answers[]" value="php">PHP<p>
<input type="checkbox" name="answers[]" value="c++">C++
</form>

并将您的脚本更改为：

<script>

var isAll = true;

function selectToggle(form) {


     var myForm = document.forms[form];
     for( var i=0; i < myForm.length; i++ ) { 
          if(isAll) {
               myForm.elements[i].checked = "checked";
          } 
          else {
               myForm.elements[i].checked = "";
          }
     }

     var mylink = document.getElementById("allLink");
     isAll = !isAll;
     mylink.innerText = (!isAll) ? "None" : "All";
}
</script>

Answer 5

简单的内容供您查看： http : //jsfiddle.net/aLnBL/2/

为您提供使用jQuery的能力

JS

$(document).on('click', '#allLink', function() {
  $('.languageSelect').not(':checked').attr('checked', 'checked');
  $(this).html('None').attr('id', 'noneLink');
}).on('click', '#noneLink', function() {
  $('.languageSelect:checked').removeAttr('checked');
  $(this).html('All').attr('id', 'allLink');
});

$('.languageSelect').on('change', function() {
  if($('.languageSelect:checked').length < 1 && $('#allLink').length < 1){
    $('#noneLink').html('All').attr('id', 'allLink');
  }  else if($('.languageSelect').not(':checked').length < 1 && $('#allLink').length > 0) {
    $('#allLink').html('None').attr('id', 'noneLink');
  }
});

的HTML

<form name="theForm">
  My favorite programming/scripting language is:
  <p>Select <span id="allLink">All</span></p>
  <ul>
    <li><input class="languageSelect" type="checkbox" name="answers[]" value="javascript" />JavaScript</li>
    <li><input class="languageSelect" type="checkbox" name="answers[]" value="perl" />Perl</li>
    <li><input class="languageSelect" type="checkbox" name="answers[]" value="php" />PHP</li>
    <li><input class="languageSelect" type="checkbox" name="answers[]" value="c++" />C++</li>
  </ul>
</form>