如何创建一个按钮来改变从“全选”的功能选择none"在此Javascript代码中

How to create a button that changes function from "Select all" to "Select none" in the this Javascript code

本文关键字：none 功能 quot 选择 在此 代码 Javascript 创建 何创建 一个 按钮      更新时间：2023-09-26

下面是一段非常好的代码，带有选择一组选择框的全部或不选择的开关(源代码)。代码对我来说非常好，因为我计划用它做什么，因为有了这个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="answerswers[]" value="javascript">JavaScript<p>
<input type="checkbox" name="answerswers[]" value="perl">Perl<p>
<input type="checkbox" name="answerswers[]" value="php">PHP<p>
<input type="checkbox" name="answerswers[]" 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>
非常感谢你的帮助。

您可以在页面作用域中使用一个变量(让我们将其命名为checked)来跟踪最后的选择状态。然后，您可以使用checked状态，而不是使用参数(在代码中切换参数)。

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;
}

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>

改变为

<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="answerswers[]" value="javascript">JavaScript<p>
<input type="checkbox" name="answerswers[]" value="perl">Perl<p>
<input type="checkbox" name="answerswers[]" value="php">PHP<p>
<input type="checkbox" name="answerswers[]" 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;
     }  
}

将表单更改为

<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="answerswers[]" value="javascript">JavaScript<p>
<input type="checkbox" name="answerswers[]" value="perl">Perl<p>
<input type="checkbox" name="answerswers[]" value="php">PHP<p>
<input type="checkbox" name="answerswers[]" 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>

一些简单的东西给你看: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="answerswers[]" value="javascript" />JavaScript</li>
    <li><input class="languageSelect" type="checkbox" name="answerswers[]" value="perl" />Perl</li>
    <li><input class="languageSelect" type="checkbox" name="answerswers[]" value="php" />PHP</li>
    <li><input class="languageSelect" type="checkbox" name="answerswers[]" value="c++" />C++</li>
  </ul>
</form>
相关文章：