Question

我已经在屏幕上实现了react native复选框，而我试图实现的目标是，选中该复选框会将对象添加到数组中，而取消选中则将其从数组中删除。

我尝试使用过滤器方法以及循环，但是它无法按要求的方式工作。

for (let i = 0; i<tmp.length; i++){
    console.log("length",tmp.length)
    if(tmp.id == item.id){
        tmp.splice(tmp.indexOf(item.id),1);
        // tmp.pop(item)
        console.log("POP")
    }
    else {
        tmp.push(item);
            console.log("PUSH")
    }
}

我的对象数组如下：

contacts:[
    {name:'a', id:1, plant:3},
    {name:'b', id:2, plant:1},
    {name:'c', id:3, plant:1}
],

复选框代码：

<CheckBox
    checked={this.state.selectedCheckList.includes(item.id)? true:false}
    onPress={()=>this.onCheckboxPress(item)} color={"#8BC63E"}
/>

我希望在tmp中创建的数组是动态的，这样它可以从数组中删除并添加整个特定对象。

之前：

tmp:[
    {name:'a', id:1, plant:3},
    {name:'b', id:2, plant:1},
    {name:'c', id:3, plant:1}
],

之后：

tmp:[
    {name:'a', id:1, plant:3},
    {name:'c', id:3, plant:1}
],

Answer 1

Try this::

var arr=[];

function change(checkbox)
{
  if(checkbox.checked == true)
  {
    arr.push(checkbox.value);
  }
  else
  {
     var j = arr.indexOf(checkbox.value);
     arr.splice(j, 1);
  }
  
  var stringArr=arr.join(',');
  document.getElementById('display').innerHTML=stringArr;
}

<div>
  <label>
    <input type="checkbox" name="check" value="Check 1" onchange="change(this)">A</label>
  <label>
    <input type="checkbox" name="check" value="Check 2" onchange="change(this)">B</label>
  <label>
    <input type="checkbox" name="check" value="Check 3" onchange="change(this)">C</label>
  <label>
    <input type="checkbox" name="check" value="Check 4" onchange="change(this)">D</label>
</div>
<div id="display">
</div>

Answer 2

尽管此问题与 React Native 有关，但所有答案都是HTML + JS。

解决方案是在现有数组的基础上创建一个新数组，并将其附加到状态：

onCheckboxPress = (item) => {
  const selectedCheckList = contacts.filter((contact) => contact.id !== item.id);

  this.setState({ selectedCheckList });
}

然后在组件中，使用以下命令检查状态：

<CheckBox
  checked={() => this.isInList(item)}
  onPress={()=>this.onCheckboxPress(item)} color={"#8BC63E"}
/>

函数如下：

isInList = (item) => {
  const { selectedCheckList } = this.state;

  return selectedCheckList.some((listItem) => listItem.id === item.id);
}

希望这对您有所帮助。

Answer 3

看看是否有帮助：

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

使用复选框从数组添加和删除对象

3 个答案: