更新複数のチェックボックスの値に基づいて、入力項目の値は、ここで

Question

を制御し、私のフィドル..です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>

Answer 1

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

Answer 2

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

Answer 3

あなたはこのようにそれを行うことができます。ここでは

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に、すべてのチェックボックスに追加されていますaddinを担当するaddまたはremove関数をそれぞれ呼び出しますgを押して、テキストボックスからDaysを削除します。

リセットボタンとしてクリアボタンタイプを作成し、クリアボタンクリックでmyFunction（）を実行したくないことは明らかです。