Javascript 根据用户输入设置复选框

我有以下HTML元素：

<div>
    <form>
        <div class="form-group">
            <label class="control-label"></label>
            <input type="text" value="1100" class="myCars">
        </div>
    </form>
    <form>
        <div class="form-group">
            <label class="control-label"></label>
            <input type="text" value="0011" class="myCars">
        </div>
    </form>
</div>

---

我怎样才能让它工作呢？

对于您的问题，一个可能的答案是：

// select the .myCars elements, and bind the anonymous function
// of the on() method as the event-handler for the 'input'
// event:
$('.myCars').on('input', function() {

  // retrieve the entered value, and then use String.prototype.trim()
  // to remove leading/trailing white-space:
  let enteredValue = $(this).val().trim(),

    // convert that String into an Array, using
    // String.prototype.split('') (as in your own posted code), then
    // use Array.prototype.map() to iterate over every Array value
    // with a call to the Number() function to convert the entered
    // values to Numbers:
    valueArray = enteredValue.split('').map(Number);

  // navigate to the closest ancestor <div> element:
  $(this).closest('div')
    // find the <input type="checkbox"> elements:
    .find('input[type=checkbox]')
    // update the 'checked' property using the anonymous function,
    // here we pass in the index of the current element:
    .prop('checked', function(index) {
      // we return the assessment of whether the array-value at
      // the current index is exactly equal to 1 (if true this
      // checks the check-box, if false it unchecks the box, or
      // leaves it unchecked); this is why we used the call to
      // Array.prototype.map(Number) earlier:
      return valueArray[index] === 1;
  });

// triggering the 'input' event so the checkboxes are updated
// on page load:
}).trigger('input');

//选择.myCars元素，并绑定匿名函数
//将on（）方法的
//活动：
$（'.myCars'）.on（'input'，function（）{
//检索输入的值，然后使用String.prototype.trim（）
//要删除前导/尾随空格，请执行以下操作：
让enteredValue=$（this）.val（）.trim（），
//使用以下命令将该字符串转换为数组
//String.prototype.split（“”）（在您自己发布的代码中），然后
//使用Array.prototype.map（）迭代每个数组值
//通过调用Number（）函数来转换输入的
//值到数字：
valueArray=enteredValue.split（“”）.map（数字）；
//导航到最近的祖先元素：
$（this）.最近（'div'））
//查找元素：
.find（'input[type=checkbox]”）
//使用匿名函数更新“checked”属性，
//这里我们传入当前元素的索引：
.prop（'checked'，函数（索引）{
//我们返回数组值是否在
//当前索引正好等于1（如果为true，则为
//选中该复选框，如果为false，则取消选中该复选框，或者
//未选中）；这就是为什么我们使用调用
//Array.prototype.map（编号）之前的版本：
返回值数组[索引]==1；
});
//触发“输入”事件以更新复选框
//页面加载时：
}).触发器（“输入”）；

var elem=$（'.myCars'）；
变量car=['car1'、'car2'、'car3'、'car4']；
var container='
'；
对于（i=0；i”；
}
容器+='
'
元素最近（'div'）。追加（容器）；
$（'.myCars'）.on（'input'，function（）{
让enteredValue=$（this）.val（）.trim（），
valueArray=enteredValue.split（“”）.map（数字）；
$（this）.closest（'div'）.find（'input[type=checkbox]）.prop（'checked'，函数（index）{
返回值数组[索引]==1；
});
}).触发器（“输入”）
您可以这样做，我遵循您的逻辑，没有更改基本代码：


var-car=['car1'，'car2'，'car3'，'car4']；
$（'.myCars'）。每个（函数（）{
var arr=$（this.val（）
变量数组=arr.split（“”）
var container='
'；
对于（i=0；i”；
}
容器+='
'
$（this）.closest（'div'）.append（container）；
})

您的
检查[索引]是什么？此数组未定义。@Islam Elshobokshy my bad，return+array[index]非常感谢您在不更改基本代码的情况下修复了它：）非常感谢您如何使用onClick更改每个复选框值？因为当我这样做时，所有输入中的复选框的值都在变化。你能为你的问题创建一个fiddle示例吗？$（文档）。在（'click'，'.container'，function（e）{var chk=”“；$（this）。最近（'cars'）。查找（':checkbox'）。每个（function（）{chk+=this.checked？“1”：“0”；elem.val（chk）；}）；可以自由地问关于这个问题的另一个问题，因为原来的问题已经得到了回答：）它们都会改变，这是正常的，您在这里指定它
elem.val（chk）
，这基本上是用
myCars
类更改所有输入。@David Thomas非常感谢，我感谢你的帮助回答我的荣幸，我很高兴能提供帮助。@David Thomas我如何设置汽车的标题？这与回答中的问题/问题有关，还是你觉得这将是一个新问题？我如果它与此问题相关，请编辑以添加有关“标题”是什么、来自何处以及您对它的期望的详细信息。如果这是一个新问题，或者可能会非常复杂，需要提出一个新问题，请提出一个新问题（将此问题的链接作为上下文）。使用$（'form'）。on（'change'，function（e）{正在获取所有复选框值，但如何从特定表单获取值？第一个或最后四个复选框
$('.myCars').each(function() {
    var arr = $(this).val()
    var array = arr.split('')
    // array values: 
    Array(4)["1", "1", "0", "0"]
    Array(4)["0", "0", "1", "1"]

    $('.myCars').prop('checked', function(index) {
        return +array[index] === 1;
    });
})

// select the .myCars elements, and bind the anonymous function
// of the on() method as the event-handler for the 'input'
// event:
$('.myCars').on('input', function() {

  // retrieve the entered value, and then use String.prototype.trim()
  // to remove leading/trailing white-space:
  let enteredValue = $(this).val().trim(),

    // convert that String into an Array, using
    // String.prototype.split('') (as in your own posted code), then
    // use Array.prototype.map() to iterate over every Array value
    // with a call to the Number() function to convert the entered
    // values to Numbers:
    valueArray = enteredValue.split('').map(Number);

  // navigate to the closest ancestor <div> element:
  $(this).closest('div')
    // find the <input type="checkbox"> elements:
    .find('input[type=checkbox]')
    // update the 'checked' property using the anonymous function,
    // here we pass in the index of the current element:
    .prop('checked', function(index) {
      // we return the assessment of whether the array-value at
      // the current index is exactly equal to 1 (if true this
      // checks the check-box, if false it unchecks the box, or
      // leaves it unchecked); this is why we used the call to
      // Array.prototype.map(Number) earlier:
      return valueArray[index] === 1;
  });

// triggering the 'input' event so the checkboxes are updated
// on page load:
}).trigger('input');