Question

我有一个包含5个复选框的表单。

Checkbox All
Checkbox 1
Checkbox 2
Checkbox 3
Checkbox 4

从服务器我填充表格，然后在元素中创建一个属性：'data-options =“0101”'。

我需要根据这个二进制值来检查我的复选框，因此每个位置都意味着Checkbox索引，值可以是0或1（选中或取消选中）。

0101表示选中复选框2和4。
1111表示所有checkboxe都已选中，此复选框也必须选中“Checkbox All”。

有任何线索吗？

Answer 1

获取data-options并循环浏览其中的每个字符，然后check/uncheck checkboxe＆＃39}，查看下面的示例。

希望这有帮助。

检查所有案例（＆＃34; 1111＆＃34;）：

＆＃13;

var options = $('span').data('options');
var check_all = true;

$.each(options.toString().split(''), function(i,v){
  if(v=="1")
    $('.my-checkbox:eq('+i+')').prop('checked',true);
  else
    check_all = false;
});

if( check_all )
  $(".check-all").prop('checked',true);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-options="1111"></span>

<input class="check-all" type="checkbox" value="checkbox_all"/>Checkbox All
<br>
<input class="my-checkbox" type="checkbox" value="checkbox_1"/>Checkbox 1
<br>
<input class="my-checkbox" type="checkbox" value="checkbox_2"/>Checkbox 2
<br>
<input class="my-checkbox" type="checkbox" value="checkbox_3"/>Checkbox 3
<br>
<input class="my-checkbox" type="checkbox" value="checkbox_4"/>Checkbox 4

＆＃13;

其他值案例（＆＃34; 1001＆＃34;）：

＆＃13;

var options = $('span').data('options');
var check_all = true;

$.each(options.toString().split(''), function(i,v){
  if(v=="1")
    $('.my-checkbox:eq('+i+')').prop('checked',true);
  else
    check_all = false;
});

if( check_all )
  $(".check-all").prop('checked',true);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-options="1001"></span>

<input class="check-all" type="checkbox" value="checkbox_all"/>Checkbox All
<br>
<input class="my-checkbox" type="checkbox" value="checkbox_1"/>Checkbox 1
<br>
<input class="my-checkbox" type="checkbox" value="checkbox_2"/>Checkbox 2
<br>
<input class="my-checkbox" type="checkbox" value="checkbox_3"/>Checkbox 3
<br>
<input class="my-checkbox" type="checkbox" value="checkbox_4"/>Checkbox 4

＆＃13;

Answer 2

这是我提出的解决方案。您可以直接访问字符串中的每个字符，就像字符串是数组一样。遍历每个字符并检查它是'0'（假）还是'1'（真）并检查相应的复选框。如果选中的复选框数为4，则检查全部检查。

var arr = $('div').attr('data-options');
for(i=0;i<arr.length;i++) {
 isChecked = arr[i] == 0 ? false : true;
 $("input[id='" + i + "']").prop('checked', isChecked);
} 
if($('input[type=checkbox]:checked').length == 4) {
  $('input[id=all]').prop('checked', true);
} else {
  $('input[id=all]').prop('checked', false);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-options='1110'>
1110
</div>
<label><input type='checkbox' id='all'/>All</label>
<label><input type='checkbox' id='0'/>1</label>
<label><input type='checkbox' id='1'/>2</label>
<label><input type='checkbox' id='2'/>3</label>
<label><input type='checkbox' id='3'/>4</label>

Answer 3

好的，因为你没有代码样本，也没有样本类/名称，我正在做出基本的假设。让我们说每个复选框都有一个共同的课程说＆＃34; checker＆＃34;

var str = '';
$(".checker").each(function(){
   if($(this).is(':checked'))
     str = str + '1';
   else 
     str = str + '0'; 
});

$("#yourElementSelector").data("options",str);

此外，这似乎有点像你的作业：P你可以尝试添加一个if / else来检查＆＃34;全部检查＆＃34;复选框！

jQuery如何从二进制字段中选中复选框

3 个答案: