的Javascript/JQuery的準Checkbock值與文本框，並把在值對

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存在，並在註釋文本，'always 10 minutes late'關聯。我應該能可能有一個數組中，

PresentArray = {'Student1' : 'always 10 minutes late', 'Student2' : ''} 

我的新節目，我更喜歡使用與用戶的具體原因複選框。

Answer 1

我應該能可能有一個數組， 'PresentArray = 在{' Student1' ： '總是遲到10分鐘'， 'STUDENT2'： ''}」

你PersentArray是不是array []而是object {}。

保持您的HTML輸入這種方式是一個錯誤。您有重複的id屬性，在document內應該是唯一的。

此外，您並未包含任何代碼，您嘗試過什麼嗎？ Stackoverflow是一個學習的地方，我們不在這裏爲你做功課。

我重構了你的HTML。如果我正確地理解了你，你需要檢查學生是否在場並給出了評論，然後我們可以將他添加到數組中。這就是腳本的功能。我們使用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>