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

Question

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

                       <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>

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

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

Answer 1

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

Answer 2

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

为 select 个复选框创建函数，

<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();">

希望对你有帮助，谢谢。

Answer 3

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

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

how to check the check-box if it's value is exist in a text-area

javascript

checkbox

textarea