Javascript：按类名选择所有复选框

Question

我在使用以下代码时遇到问题，该代码根据＆＃39;选择所有内容选择行中的所有复选框。点击按钮。问题是，如果已经检查了一些复选框以便更改其状态，则必须单击每个按钮两次。无论是否选中了复选框，我只需点击一下每个按钮就可以执行此操作。有一个简单的方法吗？谢谢！

jsFiddle

    job.setInputFormatClass(TextInputFormat.class);
    job.setOutputFormatClass(SequenceFileOutputFormat.class);

    job.setOutputKeyClass(LongWritable.class);
    job.setOutputValueClass(Text.class);

    // Default Mapper, specified just for clarity
    job.setMapperClass(Mapper.class);
    // Default reducer
    job.setReducerClass(Reducer.class);

Answer 1

您可以使用此演示选中单击复选框取消选中复选框，单击下面的链接并检查演示并集成到您的系统中。

HTML CODE：

<div id="divCheckAll">
<input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked);" />Check All</div>
<div id="divCheckboxList">
    <div class="divCheckboxItem"><input type="checkbox" name="language" id="language1" value="English" />English</div>
    <div class="divCheckboxItem"><input type="checkbox" name="language" id="language2" value="French" />French</div>
    <div class="divCheckboxItem"><input type="checkbox" name="language" id="language3" value="German" />German</div>
    <div class="divCheckboxItem"><input type="checkbox" name="language" id="language4" value="Latin" />Latin</div>
</div>

Jquery代码

function check_uncheck_checkbox(isChecked) {
    if(isChecked) {
        $('input[name="language"]').each(function() { 
            this.checked = true; 
        });
    } else {
        $('input[name="language"]').each(function() {
            this.checked = false;
        });
    }
}

http://phppot.com/jquery/check-uncheck-all-checkbox-using-jquery/

由于

Answer 2

您需要为每个复选框类型存储单独的状态

＆＃13;

＆＃13;

checked = {};

function CheckUncheckAllAndExcludeDisabledByClass(theElement, theCheckBoxClass) {
  var checks = document.querySelectorAll('.' + theCheckBoxClass);
  var ckd = checked[theCheckBoxClass] === false ? false : true;
  for (var i = 0; i < checks.length; i++) {
    var check = checks[i];
    if (!check.disabled) {
      check.checked = ckd;
    }
  }
  checked[theCheckBoxClass] = !ckd;
}

＆＃13;

<form name="editview">
  <input type="checkbox" id="edit_1" name="check1" class="edit">
  <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
  <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
  <input type="checkbox" id="edit_4" name="check4" class="edit">
  <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items.">
  <input type="checkbox" id="view_5" name="check5" class="view">
  <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
  <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
  <input type="checkbox" id="view_8" name="check8" class="view">
  <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items.">
</form>

＆＃13;

＆＃13;

＆＃13;

但如果你有jQuery那么

＆＃13;

＆＃13;

$('.select-all').click(function() {
  var $this = $(this),
    checked = !$this.data('checked');

  $('.' + $this.data('class')).not(':disabled').prop('checked', checked);
  $this.data('checked', checked)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="editview">
  <input type="checkbox" id="edit_1" name="check1" class="edit">
  <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
  <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
  <input type="checkbox" id="edit_4" name="check4" class="edit">
  <input type="button" class="button select-all" value="Select All" title="Select all: items." data-class="edit">
  <input type="checkbox" id="view_5" name="check5" class="view">
  <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
  <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
  <input type="checkbox" id="view_8" name="check8" class="view">
  <input type="button" class="button select-all" value="Select All" title="Select all: items." data-class="view">
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以这样做：

HTML：

<div id="test">
    <input type="checkbox" id="check1" name="check1" class="check">
    <input type="checkbox" id="check01" name="check01" class="check" disabled="disabled" checked>
    <input type="checkbox" id="check2" name="check2" class="check" disabled="disabled">
    <input type="checkbox" id="check3" name="check3" class="check">
    <input type="checkbox" id="check4" name="check4" class="check">
    <input type="checkbox" id="check50" name="check50" class="check">
    <input type="checkbox" id="check6" name="check6" class="check">
</div>
<input type="button" id="uncheckAll" value="select all">

JS：

$('#uncheckAll').click(function(){
    var checks = $('input[class="check"]');
    for(var i =0; i< checks.length;i++){
        var check = checks[i];
        if(!check.disabled){
            if (check.checked) {
            check.checked = false;
            }
        }
    }

    for(var i =0; i< checks.length;i++){
        var check = checks[i];
        if(!check.disabled){
            if (!check.checked) {
            check.checked = true;
            }
        }
    }
});

这是工作Fiddle

如果符合您的要求，请告诉我。

快乐编码。

Answer 4

尝试调整checked变量以使用Array.prototype.filter选择未停用的元素，Array.prototype.every切换元素checked属性

＆＃13;

＆＃13;

function CheckUncheckAllAndExcludeDisabledByClass(theElement, theCheckBoxClass) {
  var checks = document.querySelectorAll('.' + theCheckBoxClass);
  var checked = Array.prototype.filter.call(checks, function(el) {
    return !el.disabled
  }).every(function(el) {
    return el.checked
  });

  for (var i = 0; i < checks.length; i++) {
    var check = checks[i];
    if (!check.disabled) {
      check.checked = !checked ? true : false;
    }
  }
}

＆＃13;

<form name="editview">
  <input type="checkbox" id="edit_1" name="check1" class="edit">
  <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
  <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
  <input type="checkbox" id="edit_4" name="check4" class="edit">
  <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items.">
  <input type="checkbox" id="view_5" name="check5" class="view">
  <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
  <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
  <input type="checkbox" id="view_8" name="check8" class="view">
  <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items.">
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 5

问题是你为多个类名使用相同的标志：

Plain Js解决方案：

＆＃13;

＆＃13;

var state = {};
var toggle = function(clas) {
  var chk = state[clas] = !state[clas];//flips the state (true/false)
  var chks = document.getElementsByClassName(clas);
  var l = chks.length;
  while (l--)
    if (!chks[l].disabled)
      chks[l].checked = chk;
};

＆＃13;

<form name="editview">
  <input type="checkbox" id="edit_1" name="check1" class="edit">
  <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
  <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
  <input type="checkbox" id="edit_4" name="check4" class="edit">
  <input type="button" class="button" value="Select All" onclick="toggle('edit')" title="Select all: items.">
  <input type="checkbox" id="view_5" name="check5" class="view">
  <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
  <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
  <input type="checkbox" id="view_8" name="check8" class="view">
  <input type="button" class="button" value="Select All" onclick="toggle('view')" title="Select all: items.">
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 6

<强> HTML

<div id="divCheckAll">
   <input type="checkbox" name="check" id="checkall" 
          onClick="check(this.checked);" />Check All
</div>
<div id="divCheckboxList">
   <div class="divCheckboxItem">
      <input type="checkbox" name="language" value="English" />English
   </div>
   <div class="divCheckboxItem">
      <input type="checkbox" name="language"  value="Hindi" />Hindi
   </div>
   <div class="divCheckboxItem">
      <input type="checkbox" name="language"  value="German" />German
   </div>
   <div class="divCheckboxItem">
      <input type="checkbox" name="language"  value="Marathi" />Marathi
   </div>
</div>

Java脚本

function check(isChecked) {
   if(isChecked) {
      $('input[name="language"]').each(function() { 
         this.checked = true; 
       });
   } else {
       $('input[name="language"]').each(function() {
          this.checked = false;
       });
   }
}