Question

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

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

我期望的结果是： the expected result 但它给了我以下结果： the current result

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

Answer 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

Answer 2

首先，您必须创建一个包含textarea中所有复选框的数组，然后您必须使用复选框ID检查相应数组中存在哪些复选框值。然后根据isExist函数

的结果设置checked和unchecked

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

希望它有所帮助，谢谢。

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

3 个答案: