获取复选框是否被选中 jquery/ES6

Question

以下是我的 jQuery 代码，我试图通过该代码检索复选框是否被单击。我同时使用了 is 和 prop 但不知何故它总是在控制台中返回 false 和 undefined。让我知道我在这里做错了什么。

此外，让我知道处理复选框值的更好方法是针对复选框上的 click 或 change 事件（目前我正在收听 click 事件） .

jQuery代码-

const $document = $(document);
$document.ready(() => {
    $("input[type='checkbox']").on('click', () => {
        console.log("Checked Value 'is' :: ", $(this).is(':checked'));
        console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
    })
})

HTML 代码 -

<form name="myForm" id="#myForm">
    <div>
        <p><input type="checkbox" name="accept-t-and-c" /> I accept terms and conditions</p>
    </div>
    <div>   
        <button type="submit" name="submit">Submit</button>
    </div>  
</form>

JSFIDDLE - https://jsfiddle.net/82Lz1c8w/4/

编辑 - 在进入问题之前，很少有人只是将其标记为重复，但是在这种情况下，他们使用下面提到的链接引用的解决方案将不起作用，因为我正在使用箭头函数及其更改上下文。请阅读答案以获得支持。

Answer 1

使用正常功能。当使用箭头语法时，其中的 this 将引用封闭的上下文。另外，使用 change 事件。

No binding of this

$("input[type='checkbox']").on('change', function() {
    console.log("Checked Value 'is' :: ", $(this).is(':checked'));
    console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
});

Fiddle

$("input[type='checkbox']").on('change', function() {
  console.log("Checked Value 'is' :: ", $(this).is(':checked'));
  console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="accept-t-and-c" /> I accept terms and conditions</p>

Answer 2

如果您使用该语法，则需要将代码更改为

$document.ready(() => {
    $("input[type='checkbox']").on('click', (e) => {
        console.log("Checked Value 'is' :: ", $(e.target).is(':checked'));
        console.log("Checked Value 'prop' :: ", $(e.target).prop('checked'));
    })
})

Answer 3

试试下面的代码：

 $("input[type='checkbox']").on('change', (e) => {
      console.log("Checked Value 'is' :: ", e.currentTarget.checked);
 })

Answer 4

工作代码：

const $document = $(document);
$document.ready(() => {
    $("input[type='checkbox']").on('click', (e) => {
        const selfEvent = $(e.currentTarget)
        console.log(selfEvent)
        console.log("Checked Value 'is' :: ", selfEvent.is(':checked'));
        console.log("Checked Value 'prop' :: ", selfEvent.prop('checked'));
    })
})

请注意 this 指的是 window 对象。

Answer 5

$(document).ready(function(){
   $('input[type="checkbox"]').on('click', function() {
      console.log("Checked Value 'is' :: ", $(this).is(':checked'));
      console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
   })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="#myForm">
 <div>
  <p><input type="checkbox" name="accept-t-and-c" /> I accept terms and conditions</p>
 </div>
 <div> 
  <button type="submit" name="submit">Submit</button>
 </div> 
</form>

Answer 6

请用下面的代码替换javascript

const $document = $(document);
    $document.ready(function() {
        $("input[type='checkbox']").on('click', function(){
            console.log("Checked Value 'is' :: ", $(this).is(':checked'));
    console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
    })

})

Answer 7

我认为你不应该使用箭头函数，因为在箭头函数中，this 指向父 scope.you 可以尝试替换

$("input[type='checkbox']").on('click', () => {
    console.log("Checked Value 'is' :: ", $(this).is(':checked'));
    console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
})

与

$("input[type='checkbox']").on('click', function() {
    console.log("Checked Value 'is' :: ", $(this).is(':checked'));
    console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
})

Answer 8

使用 ES6 你可以做类似上面的事情，

document.querySelector("input[name='accept-t-and-c']").onchange = function() {
    if(this.checked)
        console.log("Checkbox is checked");
    else
        console.log("Checkbox is not checked");
};

获取复选框是否被选中 jquery/ES6

Get if checkbox is checked or not in jquery/ES6

html

javascript

jquery

ecmascript-6

arrow-functions