選擇要添加到名稱輸出時，從複選框中獲取標題

我有一個表單，並且在我的HTML文件中有DR，先生，女士和小姐的複選框。我該如何做到這一點，如果其中任何一項被檢查，適用於輸出名稱的標題，所以它顯示在first_name和last_name之前。選擇要添加到名稱輸出時，從複選框中獲取標題

<div class="tRow"> 
    <div class="tCell"><label for="dr">Doctorate?</label></div> 
    <div class="tCell"><input type="checkbox" id="dr"></div> 
</div><!--ROW STOPS-->

var employee = { 
    first_name: first_name, 
    last_name: last_name, 
}; 

console.log(employee); 

// Create the ouptut as HTML: 
var message = employee.first_name + ", " + employee.last_name + "<br>"; 

// Display the employee object: 
output.innerHTML = message;

來源

2016-09-26 ablebengott

我想你真正想要的單選按鈕，但也許不是。

 var first_name = "Bob"; 
 
     var last_name = "Dobbs"; 
 
     var employee = { 
 
      first_name: first_name, 
 
      last_name: last_name, 
 
     }; 
 
     var message = employee.first_name + ", " + employee.last_name; 
 
     var checkboxes = document.querySelectorAll('[type=checkbox]'); 
 
     var output = document.querySelector('#output'); 
 

 
     for (var ix = 0; ix < checkboxes.length; ix++) { 
 
      checkboxes.item(ix).addEventListener('click', onClick); 
 
     } 
 

 
     output.innerHTML = message; 
 

 
     function onClick() { 
 
      var newMessage = message; 
 
      for (var ix = checkboxes.length -1; ix > -1 ; ix--) { 
 

 
       if (checkboxes.item(ix).checked) { 
 
        newMessage = checkboxes.item(ix).id + " " + newMessage; 
 
       } 
 
      } 
 
      output.innerHTML = newMessage; 
 
     }

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
     <label><input type="checkbox" id="dr"><span class="label-body">Dr</label> 
 
     <label><input type="checkbox" id="mr"><span class="label-body">Mr</label> 
 
     <label><input type="checkbox" id="mrs"><span class="label-body">Mrs</label> 
 
     <label><input type="checkbox" id="miss"><span class="label-body">Miss</label> 
 
     <div id="output" style="text-transform: capitalize;"></div> 
 
    </div>

來源

2016-09-27 00:30:17 Will

對值而不是ID使用* value *屬性更合適。 – RobG

好的。繼續並添加它。使用已經存在的內容很簡單。 – Will

通常表單控件的形式，使生活變得更輕鬆。並且，您希望用戶選擇幾個項目之一，選擇或一組單選按鈕效果最佳。

例如爲：

function showFullName(el) { 
 

 
    // Get the parent form from the element that was clicked 
 
    var form = el.form; 
 

 
    // Get the value of the selected title radio button 
 
    var title = Array.prototype.filter.call(form.title, function(radio){ 
 
       return radio.checked; 
 
       })[0].value; 
 

 
    // Write the full name to the span 
 
    document.getElementById('fullName').textContent = 
 
    title + ' ' + form.firstName.value + ' ' + form.lastName.value; 
 
}

<form id="nameForm"> 
 
    <table> 
 
    <tr> 
 
     <td>First name: 
 
     <td><input name="firstName"> 
 
    <tr> 
 
     <td>Last name: 
 
     <td><input name="lastName"> 
 
    <tr> 
 
     <td>Title: 
 
     <td><input name="title" type="radio" value="Ms" checked> Ms<br> 
 
      <input name="title" type="radio" value="Mr"> Mr 
 
    <tr> 
 
     <td colspan="2"><input type="button" value="Show full name" onclick="showFullName(this);"> 
 
    <tr> 
 
     <td colspan="2"><span id="fullName"></span> 
 
    </table> 
 
</form>

請注意，你需要一個提交按鈕提交值。

來源

2016-09-27 00:49:00 RobG

選擇要添加到名稱輸出時，從複選框中獲取標題

回答

相關問題