checkbox .checked свойство всегда false - PullRequest
Новая
       25

checkbox .checked свойство всегда false

0 голосов
/ 10 декабря 2018

по какой-то причине этот код не получает должным образом свойство флажка, но всегда ложно.Я ожидал, что он покажет, был ли установлен флажок.Что мне не хватает?Спасибо 

const clickArray = document.querySelectorAll("input")
const changeStyle = style => {
  return (() => console.log(style))
}
clickArray.forEach(
  (item, index) => {
    item.addEventListener('click', changeStyle(item.checked))
  }
)
<label for="chk1">
        <input type="checkbox" name="chk1" value="chk1">
        Bold
    </label>
<label for="chk2">
        <input type="checkbox" name="chk2" value="chk2">
        Italic
    </label>
<label for="chk3">
        <input type="checkbox" name="chk3" value="chk3">
        Underline
    </label> const click

Ответы [ 4 ]

0 голосов
/ 10 декабря 2018

Проблема в том, что вы получаете item.checked во время вызова changeStyle, то есть когда вы добавляете прослушиватель событий, а не когда происходит событие.

Вместо передачи *От 1005 * до changeStyle, передать item и получить changeStyle свойство checked. 

const clickArray = document.querySelectorAll("input")
const changeStyle = element => {
  return (() => console.log(element.checked))
}
clickArray.forEach(
  (item, index) => {
    item.addEventListener('click', changeStyle(item))
  }
)
<label for="chk1">
        <input type="checkbox" name="chk1" value="chk1">
        Bold
    </label>
<label for="chk2">
        <input type="checkbox" name="chk2" value="chk2">
        Italic
    </label>
<label for="chk3">
        <input type="checkbox" name="chk3" value="chk3">
        Underline
    </label> const click
0 голосов
/ 10 декабря 2018

решено , в вашем случае вызов функции теряет контекст, так как вы используете обработчики событий, используйте event для выполнения любых проверок, а не для элемента, так как он будет привязывать старый контекст элемента кфункция. 

clickArray = document.querySelectorAll("input");
const changeStyle = style => {
  console.log(style);
}
clickArray.forEach(
  (item, index) => {
    item.addEventListener('click', function (e) { changeStyle(e.target.checked) })
  }
)
0 голосов
/ 10 декабря 2018

Вы можете попробовать обернуть changeStyle () в сторону анонимной функции: 

var clickArray = document.querySelectorAll("input")
const changeStyle = style => {
  console.log(style);
}
clickArray.forEach(
    (item, index) => {
        item.addEventListener('click', function(){ changeStyle(this.checked)})
    }
)
<label for="chk1">
    <input type="checkbox" name="chk1" value="chk1">
    Bold
</label>
<label for="chk2">
    <input type="checkbox" name="chk2" value="chk2">
    Italic
</label>
<label for="chk3">
    <input type="checkbox" name="chk3" value="chk3">
    Underline
</label>
0 голосов
/ 10 декабря 2018

Этот элемент: 

<input type="checkbox" name="chk1" value="chk1">

сообщит .checked = false, поскольку он не имеет атрибута checked.Если вы хотите иметь .checked = true, элемент должен быть 

<input type="checkbox" name="chk1" value="chk1"  checked="checked">

Примечание: <input> из type=checkbox не использует атрибут value.Таким образом, это игнорируется.Он не влияет на свойство .checked.

...