アレイからのチェックボックス値の追加と削除

Question

ユーザーがチェックボックスをクリックしたときに配列から要素を追加したり削除したりしたいと思います。これはHTML文書に印刷されます。私はこれまでに関数を実行するたびに配列を空にすることでこれを完了しましたが、配列を空にしてチェック項目を追加するのではなく、項目を削除したいと思います。

https://jsfiddle.net/Buleria28/zz0x6hgc/

/*Object that includes array*/ 
information { 
    letters[] 
} 

/*Function*/ 
function letter() { 
    var checkbox = Array.from(document.getElementsByName("test")); //creates array from checkboxes 

    for (var i = 0; i < checkbox.length; i++) { 
    if (checkbox.checked) { 
     information.letters.push(checkbox[i].value); 
    } else { 
    var sbVal = checkbox[i].value; 
     if (information.letters.includes(sbVal) == true) { 
     var j = indexOf(sbVal); 
     information.letters.splice(j, 1); 
     } 
    } 
    } 

    var showAbc = information.letters.join(", "); //converts to string 
    document.getElementById("displaylet").innerHTML = showAbc; //prints to HTML document 
} 

/*Event Listener*/ 
var box = document.getElementsByName("test"); 
if (box[0].addEventListener) { 
    for (var i = 0; i < box.length; i++) { 
    box[i].addEventListener("change", letter, false); 
    } 
} else if (box[0].attachEvent) { 
    for (var i = 0; i < box.length; i++) { 
    box[i].attachEvent("onchange", letter); 
    } 
} 

HTMLはここにある：あなたのJavascriptコードと

<div> 
<label><input type="checkbox" name="test" value="A">A</label> 
<label><input type="checkbox" name="test" value="B">B</label> 
<label><input type="checkbox" name="test" value="C">C</label> 
<label><input type="checkbox" name="test" value="D">D</label> 
</div> 



<p id="displaylet"></p> 

Answer 1

いくつかの問題。この方法を試してください。あなたが言及した方法は、その単純ではなく、あなたが正しい順序で文字を表示したい場合は特に、チェックの多くを必要とするコードを実装する https://jsfiddle.net/zz0x6hgc/4/

/*Object that includes array*/ 
var information = { 
    letters: [] 
} 

/*Function*/ 
function letter(ev) { 
    if (ev.target.checked) { 
    information.letters.push(ev.target.value); 
    } else { 
    var index = information.letters.indexOf(ev.target.value); 
    if (index !== -1){ 
     information.letters.splice(index, 1); 
    } 
    } 

    var showAbc = information.letters.join(", "); //converts to string 
    document.getElementById("displaylet").innerHTML = showAbc; //prints to HTML document 
} 

/*Event Listener*/ 
var box = document.getElementsByName("test"); 
if (box[0].addEventListener) { 
    for (var i = 0; i < box.length; i++) { 
    box[i].addEventListener("change", letter, false); 
    } 
} else if (box[0].attachEvent) { 
    for (var i = 0; i < box.length; i++) { 
    box[i].attachEvent("onchange", letter); 
    } 
} 

Answer 2

。このコードがあなたに役立つかどうか私に教えてください。私は数行のコメントを追加しました。あなたのコードはずっと簡単になるように、私は個人的に、シナリオのこの種のためのHashSetを使用したい

/*Object that includes array*/ 
 
    var information = { 
 
     letters: [] 
 
    } 
 
    var boxes = document.getElementsByName("test"); 
 
    /* Array of Checkboxes */ 
 
    var boxesArr = Array.prototype.slice.call(boxes, 0); 
 
    /*Function*/ 
 
    function letter(e) { 
 
     /* Filter out the checboxes that aren't checked */ 
 
     var checkedBoxes = boxesArr.filter((checkbox) => { 
 
     return checkbox.checked; 
 
     }); 
 

 
     /* Create a new array with only the checkbox values or letters */ 
 
     information.letters = checkedBoxes.map((checkbox) => { 
 
     return checkbox.value; 
 
     }) 
 

 
     var showAbc = information.letters.join(", "); //converts to string 
 
     document.getElementById("displaylet").innerHTML = showAbc; //prints to HTML document 
 
    } 
 

 
    /*Event Listener*/ 
 
    boxes.forEach((checkbox) => { 
 
     if (checkbox.attachEvent) { 
 
     checkbox.attachEvent("onchange", letter); 
 
     } else { 
 
     checkbox.addEventListener("change", letter, false); 
 
     } 
 
    })

<div> 
 
    <label> 
 
    <input type="checkbox" name="test" value="A">A</label> 
 
    <label> 
 
    <input type="checkbox" name="test" value="B">B</label> 
 
    <label> 
 
    <input type="checkbox" name="test" value="C">C</label> 
 
    <label> 
 
    <input type="checkbox" name="test" value="D">D</label> 
 
</div> 
 
<div id="displaylet"> 
 

 
</div>

Answer 3

。私はあなたのJavaScriptで次の変更を行いました

：

文字オブジェクトを含み、オブジェクトと選択した文字を返すようにtoStringメソッド。 lettersプロパティは、選択された文字をキーと値として保持します。 toStringメソッドは、選択された文字の結合された表現を返します。

初期化機能は、すべてのチェックボックスに対して「変更」イベントを登録するだけです。チェックボックスがオンになっている場合は、それがlettersプロパティに追加されるか、削除されます。

var information = { 
    letters: {}, 
    toString: function() { 
     return Object.keys(this.letters).join(", "); 
    } 
}; 

/*Initialize*/ 
(function() { 
    var boxes = document.getElementsByName("test"); 
    for (let box of boxes) { 
     box.addEventListener("change", function() { 
      if (this.checked) 
       information.letters[this.value] = true; 
      else delete information.letters[this.value]; 
      document.getElementById("displaylet").innerHTML = information.toString(); 
     }); 
    } 
})(); 

Answer 4

このことができます参照してください：

/*Object that includes array*/ 
 
let information = {}; 
 
information['letters'] = []; 
 

 
/*Function*/ 
 
function letter() { 
 
    var checkbox = Array.from(document.getElementsByName("test")); //creates array from checkboxes 
 

 
    for (var i = 0; i < checkbox.length; i++) { 
 
    var sbVal = checkbox[i].value; 
 

 
    if (checkbox[i].checked && information.letters.indexOf(sbVal) < 0) { 
 
     information.letters.push(checkbox[i].value); 
 
     continue; 
 
    } 
 

 
    if (checkbox[i].checked === false && information.letters.indexOf(sbVal) >= 0) { 
 
     var j = information.letters.indexOf(sbVal); 
 
     information.letters.splice(j, 1); 
 
    } 
 
    } 
 

 
    var showAbc = information.letters.join(", "); //converts to string 
 
    document.getElementById("displaylet").innerHTML = showAbc; //prints to HTML document 
 
} 
 

 
/*Event Listener*/ 
 
var box = document.getElementsByName("test"); 
 
if (box[0].addEventListener) { 
 
    for (var i = 0; i < box.length; i++) { 
 
    box[i].addEventListener("change", letter, false); 
 
    } 
 
} else if (box[0].attachEvent) { 
 
    for (var i = 0; i < box.length; i++) { 
 
    box[i].attachEvent("onchange", letter); 
 
    } 
 
}

<div> 
 
    <label> 
 
    <input type="checkbox" name="test" value="A">A</label> 
 
    <label> 
 
    <input type="checkbox" name="test" value="B">B</label> 
 
    <label> 
 
    <input type="checkbox" name="test" value="C">C</label> 
 
    <label> 
 
    <input type="checkbox" name="test" value="D">D</label> 
 
</div> 
 
<div id="displaylet"> 
 
</div>

Answer 5

修正の多くは、あなたのコードであり、ここでupdated fiddleです。

1. 出力へのHTMLはありませんでした：オブジェクトの

   <p id="displaylet"></p><!-- added --> 
   

2. 宣言は有効ではありませんでした：

   information.letters.length = 0; //clear all previous selection 
   var checkbox = document.getElementsByName("test"); /*changed*/ 
   
   for (var i = 0; i < checkbox.length; i++) { 
       if (checkbox[i].checked) { /*changed, missing [i] */ 
       information.letters.push(checkbox[i].value); 
       } 
   

：また、いくつかの変更を経て

var information = { /*changed*/ 
    letters: [] /*changed*/ 
}; 

3. 機能letter