Question

我有类似下面的质量复选框，我想根据数据库值选择。如果我将数据库值转储到字符串中，如DC0 | 100; DK0 | 100; DM0-SRM | 200; DR0 | 300（;分隔或其他）。如何使用JAVASCRIPT或AJAX

选择基于值的复选框

以下是示例复选框：

<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DB0|100' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DB5|100' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DC0|100' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DE0|100' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DG0|200' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DG0|300' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DK0|100' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DL0|200' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DL0|300' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DM0-SRM|200' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DM0-SRM|300' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DM0-SUS|210' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DM0-SUS|310' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DR0|200' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DR0|300' />
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DV0|100' /> 
<input type='checkbox' id='systemclient[]' name='systemclient[]' value='DX0|100' />

Answer 1

尝试以下代码。请参阅 JSFiddle demo

var queryRes = "DC0|100;DK0|100;DM0-SRM|200;DR0|300";

// split string result by ';' char
var resArray = queryRes.split(';');

// Iterate splite items
resArray.forEach(function(item){
    // Select checkbox using value got from query and 
    // set its 'checked' attribute to TRUE
    $('input[type="checkbox"][value="' + item + '"]').attr('checked', true);
});

Answer 2

看到这个小提琴：http://jsfiddle.net/8ubk5c0f/2/

  $(function(){
        var stringFromServer = "DC0|100;DK0|100;DM0-SRM|200;DR0|300";
        var arrayOfValues = stringFromServer.split(";");
        var $checkboxes = $("input[type=checkbox]");
        $checkboxes.each(function(idx, element){
            if(arrayOfValues.indexOf(element.value) != -1){
                element.setAttribute("checked", "checked");
            }
            else{
                element.removeAttribute("checked");
            }
        });
    });

Answer 3

首先，您需要输入元素上的唯一ID。在您的示例代码中，所有输入元素都具有id ='systemclient []'。

我假设您在JavaScript中拥有数据库中的字符串数据，只需要帮助检查与解析后的字符串匹配的复选框。

解析字符串：

var stringArray = myDataString.split(";");  //where ";" is the string delimiter

迭代您的复选框并查找匹配

$("input[name*='systemclient[]']").each(function(){
   console.log($(this));  //verify you're able to target the element
   if($.inArray($(this).val(), stringArray) !== -1) {
       $(this).prop('checked', true);
   } else {
       $(this).prop('checked', false);
   }
});

Answer 4

在不知道您拥有哪些库[vanilla JS =）]的情况下，您可以通过选择的分隔符将字符串拆分为数组，然后迭代数组，通过dom查询选中所有复选框，然后设置dom节点选中的属性为真。

 var foos = str.split(';');
 foos.map(function(foo){ 
   var checkbox = document.querySelectorAll("input[type='checkbox'[value='" + foo + "']");
   checkbox.checked = true;
});

Javascript如何根据带有值的分隔字符串选择复选框

4 个答案: