Question

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

另外，让我知道处理复选框值的更好方法是定位click或change事件复选框（目前我正在收听click事件）。< / p>

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 CODE -

<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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

Try below code:

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

Answer 3

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

$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 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

请用以下代码替换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 6

＆＃13;

$(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'));
   })
})

＆＃13;

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

＆＃13;

Answer 7

我认为你不应该使用arrow-function，因为在箭头函数中，this指向父范围。你可以尝试替换 $("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中选中复选框

8 个答案: