如果它的值存在于文本区域中，如何检查复选框答案

【问题标题】：how to check the check-box if it's value is exist in a text-area如果它的值存在于文本区域中，如何检查复选框
【发布时间】：2015-04-08 21:15:29
【问题描述】：

我有一些复选框和一个文本区域，并在一个文本区域中收集所有复选框值，然后将其插入数据库中，当我从数据库中选择数据时，我只有文本数据-area 不用于复选框。我想要的是：我之前检查过的复选框在我查看它们时必须被选中。现在我如何检查复选框的值是否存在于文本区域中然后选中该框？我的代码在这里？

                       <div style="margin-top:50px;">
                            <div style="margin-top:-30px;">
                                <h4>Header Options</h4><br>
                                <table style="width:70%;float:left">
                                    <tbody>
                                        <tr>
                                            <td><input type="checkbox" id="h_option1" name="h_option1" value="Company Name"> Company Name </td>
                                            <td><input type="checkbox" id="h_option2" name="h_option2" value="Company Address"> Company Address</td>
                                            <td><input type="checkbox" id="h_option3" name="h_option3" value="Month"> Month</td>
                                            <td> <input type="checkbox" id="h_option4" name="h_option4" value="Name"> Name </td>
                                        </tr>
                                        <tr>
                                            <td> <input type="checkbox" id="h_option5" name="h_option5" value="Employee Ref No"> Employee Ref No </td>
                                            <td><input type="checkbox" id="h_option6" name="h_option6" value="Designation"> Designation </td>
                                            <td><input type="checkbox" id="h_option7" name="h_option7" value="Date of joining"> Date of joining </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div>
                                    <span>
                                        <textarea readonly="" type="text" id="header_options" name="header_options" rows="5" cols="25">Company Name,Company Address,Month,Employee Ref No,</textarea>
                                    </span>
                                </div>
                            </div>
                            <br>
                            <br>
                            <div align="center">
                                <input type="button" value="Configure" class="detailsbutton" onclick="get_check_value();">
                            </div>
                            <br>
                        </div>

我期望的结果是：但它给了我以下结果：

注意：我在文本区域内用逗号分隔复选框的每个值。

【问题讨论】：

能否提供函数get_check_value()的代码？问题应该就在这里。

标签： javascript checkbox textarea

【解决方案1】：

var options = document.getElementById('header_options').value;
options = options.split(',');
for(var i = 0; i < options.length; i++){
//Set "checked" for element where the value is the current value in options array
    if(options[i]) document.querySelectorAll('input[value="'+options[i]+'"][type="checkbox"]')[0].checked = true;
}

Fiddle

【讨论】：

【解决方案2】：

首先，您必须创建一个包含文本区域中存在的所有复选框的数组，然后您必须使用复选框的 id 检查相应数组中存在哪些复选框值。然后根据 isExist 函数的结果设置选中和未选中

【讨论】：

【解决方案3】：

虽然您可以在服务器端代码（PHP、JSP 或您正在使用的任何技术）上做得更好，但如果您真的想在客户端做这件事，那么这是纯 JavaScript 中的一种方法（适用于几乎所有现代浏览器版本）。

创建一个函数来选择复选框，

<script type="text/javascript">
function selectChkbox() {
  var strAllValues = document.getElementById('header_options').value; // Contains all values
  var chkboxArr = document.getElementsByTagName('input');
  for(var i=0; i<chkboxArr.length; i++) {
    if(chkboxArr[i].type == 'checkbox') {
       if(strAllValues.indexOf(chkboxArr[i]) != -1) { // check if checkbox value is present in all values
          chkboxArr[i].checked = true;
       }
    }
  }
}
</script>

页面加载时调用此函数。像这样：

<body onload="selectChkbox();">

希望对你有帮助，谢谢。

【讨论】：