Question

示例代码：

Present <input type='checkbox' value='student1' id='id_A' name='A' />
Absent <input type='checkbox' value='student1' id='id_B' name='B' />
Comments <input type='text' name='comments' id='id_comments' />

Present <input type='checkbox' value='student2' id='id_A' name='A' />
Absent <input type='checkbox' value='student2' id='id_B' name='B' />
Comments <input type='text' name='comments' id='id_comments' />

等在所有用户的循环中，具有文本的注释字段是可选的。

问题：我想依赖于student1，如果复选框字段有文本，我想关联选中的相应复选框值，在这种情况下，如果student1存在且注释中有文本，{ {1}}。我应该可能有一个数组，

'always 10 minutes late'

我是编程新手，我更倾向于使用复选框，因为具体原因与用户有关。

Answer 1

我应该可以在一个数组中，'PresentArray = {'Student1'：'总是迟到10分钟'，'学生2'：''}'

您的PersentArray不是array []，而是object {}。

以这种方式保持HTML输入是一个错误。您有id个重复属性，这些属性在document内应该是唯一的。

此外，您没有包含任何代码，您尝试过什么吗？ Stackoverflow是一个学习的地方，我们不是为你做功课。

我重构了你的HTML。如果我理解正确你需要检查学生是否在场并发表评论，那么我们可以将他添加到阵列中。这就是脚本的功能。

我们使用checkbox代替radio，因为学生不能同时出现和缺席。

请参阅工作示例并仔细阅读我的评论，以便更好地理解。如果您有任何疑问，请务必询问。

var students = [];

var formInputs = document.querySelectorAll('input');

// You can use this function eg. var studentsInfo = populatePresentArray();
// Function returns populated PresentArray []
function populatePresentArray() {
  for (i = 0; i < formInputs.length; i++) {
    var input = formInputs[i];
  
    // if input is type radio and is checked then we assume
    if (input.value === 'present' && input.checked) {
    
      // query Comment input for current student
      var comment = document.querySelector('input[name="' + input.name + '-comments"]');
    
      // Now let's check if comments has required text
      if (comment.value === 'always 10 minutes late') {
        // All conditions are met, lets add to array new record
        students.push({ [input.name] : comment.value });
      }
    }
  }
  
  // Log it
  console.log(students);
  
  return students;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="studentsForm">
Present <input type="radio" value="present" name="student1" checked />
Absent <input type="radio" value="absent" name="student1" />
Comments <input type="text" name='student1-comments' value="" />
<br>
Present <input type="radio" value="present" name="student2" checked />
Absent <input type="radio" value="absent" name="student2" />
Comments <input type="text" name='student2-comments' value="always 10 minutes late" />
<br>
Present <input type="radio" value="present" name="student3" checked />
Absent <input type="radio" value="absent" name="student3" />
Comments <input type="text" name='student3-comments' value="always 10 minutes late" />
<br>
Present <input type="radio" value="present" name="student4"  />
Absent <input type="radio" value="absent" name="student4" checked />
Comments <input type="text" name='student4-comments' value="always 10 minutes late" />
<br>
Present <input type="radio" value="present" name="student5" checked />
Absent <input type="radio" value="absent" name="student5" />
Comments <input type="text" name='student5-comments' value="" />
<br>
<button onclick="populatePresentArray()" type="button">PresentArray</button>
</form>

Javascript / JQuery将Checkbock值与文本框关联并放入值对

1 个答案: