0

下面是一段非常漂亮的代码，带有切换选项来选择全部或不选择一组选择框（源）。该代码非常适合我打算用它做的事情，因为使用这个 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>

非常感谢您的帮助。

4

5 回答 5

0

您可以在页面范围内使用变量（让我们将其命名为选中）来跟踪最后的选择状态。然后，您可以使用选中状态，而不是使用参数（代码中的切换参数）。

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;
}
于 2013-05-07T15:22:07.817 回答
0

你看的东西很简单：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>
于 2013-05-07T16:10:59.803 回答
0

改成

<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;
     }  
}
于 2013-05-07T15:22:20.003 回答
0 
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;
          }
     }
}

你可以使用像

Select <a href="javascript:selectToggle('theForm');">Select/Deselect</a> <p>
于 2013-05-07T15:18:59.237 回答
0

将您的表格更改为

<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>
于 2013-05-07T15:30:31.467 回答