更新基於多個複選框的值的輸入項的值控制

-1

這裏是我的小提琴.. https://jsfiddle.net/sinoobkt/1kd16pgx/1/更新基於多個複選框的值的輸入項的值控制

如果我選中的複選框，則該值應該得到顯示在輸入字段，如果我取消選中複選框，它的值應該從輸入字段中刪除。我還需要能夠手動從輸入字段中刪除值。一旦我點擊清除，所有的值應該被清除。

function Myfunction(){ 
 
    
 
}

<form action=""> 
 
<input type="checkbox" name="day" id="1" value="Sunday">Sunday<br> 
 
<input type="checkbox" name="day" id="2" value="Monday">Monday <br> 
 
<input type="checkbox" name="day" id="3" value="Tuesday">Tuesday<br> 
 
<input type="checkbox" name="day" id="4" value="Thursday">Thursday<br> 
 
<input type="checkbox" name="day" id="5" value="Friday">Friday<br> 
 

 
Selected Days: <input type="text" name="LastName" value=""><br> 
 
<input type="submit" value="Clear" onclick="Myfunction()"> 
 
</form>

來源

2016-09-23 sunu

不完全相關，但它看起來像濫用'input type =「submit」'。您實際上不想使用此按鈕提交表單。改用按鈕類型。這個問題到底是什麼，它太廣泛了。您必須自己嘗試解決問題，如果您遇到問題，請提出問題。 – Teemu

嘗試編寫一些我們可以幫助您的JavaScript代碼。 – bmceldowney

你沒有嘗試過任何東西？ – trincot

<form action=""> 
<input type="checkbox" name="day" id="1" value="Sunday" onclick="fillInput(this);">Sunday<br> 
<input type="checkbox" name="day" id="2" value="Monday" onclick="fillInput(this);">Monday <br> 
<input type="checkbox" name="day" id="3" value="Tuesday" onclick="fillInput(this);">Tuesday<br> 
<input type="checkbox" name="day" id="4" value="Thursday" onclick="fillInput(this);">Thursday<br> 
<input type="checkbox" name="day" id="5" value="Friday" onclick="fillInput(this);">Friday<br> 

Selected Days: <input type="text" name="LastName" value=""><br> 
<input type="button" value="Clear" onclick="Myfunction()"> 
</form> 

<script> 
function Myfunction(){ 
    document.getElementsByName("LastName")[0].value=""; 
} 

function fillInput(element){ 
    if(element.checked) { 
    document.getElementsByName("LastName")[0].value= document.getElementsByName("LastName")[0].value + element.value + " "; 
    } 
    else { 
    document.getElementsByName("LastName")[0].value = document.getElementsByName("LastName")[0].value.replace(element.value + " ", ""); 
    } 
} 
</script>

來源

2016-09-23 19:12:04

function Myfunction(){ 
    document.getElementById("1").value = ""; 
    ... 
}

來源

2016-09-23 18:52:57 Kiogara

你可以這樣說：

var checkboxes = document.getElementsByName('day'); 
for (var i = 0; i < checkboxes.length; i++) { 
    checkboxes[i].addEventListener("click", function() { 
     if (this.checked) { 
      add(this.value); 
     } else { 
      remove(this.value); 
     } 
    }); 
} 
function add(value) { 
    var textbox = document.getElementById('selectedDay'); 
    textbox.value += value; 
} 
function remove(value) { 
    var textbox = document.getElementById('selectedDay'); 
    textbox.value = textbox.value.replace(value, ''); 
} 


<form action=""> 
<input type="checkbox" name="day" id="1" value="Sunday">Sunday<br> 
<input type="checkbox" name="day" id="2" value="Monday">Monday <br> 

<input type="checkbox" name="day" id="3" value="Tuesday">Tuesday<br> 
<input type="checkbox" name="day" id="4" value="Thursday">Thursday<br> 
<input type="checkbox" name="day" id="5" value="Friday">Friday<br> 
Selected Days: <input type="text" id="selectedDay" value=""><br> 
<input type="reset" value="Clear"> 
</form>

這裏的onclick事件監聽器被添加到所有的複選框，在檢查或onchecking它將分別調用add或remove函數來負責插件g並從文本框中刪除天數。

而且您可以將清除按鈕類型設置爲重置按鈕，顯然您不想在清除按鈕上單擊執行myFunction（）。

來源

2016-09-23 20:05:27 Nabscalyx

更新基於多個複選框的值的輸入項的值控制

回答

相關問題