【问题标题】:How can I check checkboxes based on values?如何根据值检查复选框?
【发布时间】:2012-01-09 02:29:57
【问题描述】:

我返回一个 JSON 数据结构,我像这样拆分并填充我的数组:

var arrayValues = data.contents.split('|');

// arrayValues = 1,3,4

如何根据数组值勾选对应的复选框?

我的 HTML 如下所示:

 <div id="divID">
     <input type="checkbox" name="test" value="1" /> Test 1<br />
     <input type="checkbox" name="test" value="2" /> Test 2<br />
     <input type="checkbox" name="test" value="3" /> Test 3<br />
     <input type="checkbox" name="test" value="4" /> Test 4<br />
     <input type="checkbox" name="test" value="5" /> Test 5<br />                           
 </div>

【问题讨论】:

  • 什么标准会导致您选中/取消选中这些框

标签: jquery html checkbox


【解决方案1】:

使用属性选择器试试这个

$.each(arrayValues, function(i, val){

   $("input[value='" + val + "']").prop('checked', true);

});

【讨论】:

  • 这很好用......我所要做的就是包含父 div 标签。谢谢!
  • 应该是.prop('checked',true)——虽然JS认为字符串“checked”是真的,所以最终结果是一样的。
  • 这更简单:$('input[name="test"]').val(arrayValues); 在我的回答中查看详细信息 [stackoverflow.com/a/44592561/2017567]
【解决方案2】:

Javascript

$.each(arrayValues, function (index, value) {
  $('input[name="test"][value="' + value.toString() + '"]').prop("checked", true);
});

【讨论】:

  • 这看起来比 ShankarSangoli 的解决方案更准确,尽管我不明白为什么中间的 .toString() 是必要的。当然value 在任何情况下都是一个字符串。
  • @mblase75 ... 只是我的一个习惯。
  • 是的,作者可能已经使用 toString 来处理值是整数的情况,但是,在 DOM 中这也是字符串类型
【解决方案3】:

更简单:

$('input[name="test"]').val(arrayValues);

这将检查数组中的值并取消选择其他值。

来自 JQuery 的文档:http://api.jquery.com/val/

val() 允许您传递元素值的数组。这很有用 在处理包含

【讨论】:

    【解决方案4】:

    您可以遍历数组并在 jQuery 上进行属性搜索

    var i = 0;
    while (arrayValues.length < i) {
      var val = arrayValues[i];
      $('#divID input[value="' + val + '"]').prop('checked', 'checked');
      i++;
    }
    

    文档:http://api.jquery.com/attribute-equals-selector/

    【讨论】:

      【解决方案5】:

      好的,我花了一点时间来解决我在代码中的错误。 我想这个问题现在由 ShankarSangoli 回答了。

      我希望你不介意我发布我的解决方案。我只是好奇这是否会影响性能等。

      var arrayValues = new Array(1,3,4);
      
      $('#divID input').filter(function(){
          return ($.inArray( parseInt($(this).attr('value')), arrayValues)) != -1;
      }).attr('checked', 'checked');
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2013-03-09
        • 2017-07-11
        • 2020-08-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-10-19
        相关资源
        最近更新 更多