获取切换复选框状态是真还是不

在这，我没有获得复选框的状态是真还是假我尽我所能我没有得到任何解决方案。 当点击切换时，它总是给我一个假值

$('input').on("change", function() { if ($('input[type="checkbox"].is(":checked")')) { alert("its checked"); } }); 

 input[type=checkbox] { width: 0; height: 0; visibility: hidden; } label { cursor: pointer; text-indent: -9999px; width: 50px; height: 20px; background: grey; display: block; border-radius: 100px; position: relative; } label:after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #fff; border-radius: 90px; transition: 0.3s; } input:checked+label { background: #bada55; } input:checked+label:after { left: calc(100% - 5px); transform: translateX(-100%); } label:active:after { width: 30px; } 

   Toggle 

Answer 1

使用$(this).is(":checked")代替。

 $('input').on("change", function () { if ($(this).is(":checked")) { alert("its checked"); } }); 

 input[type=checkbox] { width: 0; height: 0; visibility: hidden; } label { cursor: pointer; text-indent: -9999px; width: 50px; height: 20px; background: grey; display: block; border-radius: 100px; position: relative; } label:after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #fff; border-radius: 90px; transition: 0.3s; } input:checked + label { background: #bada55; } input:checked + label:after { left: calc(100% - 5px); transform: translateX(-100%); } label:active:after { width: 30px; } 

   Toggle 

Answer 2

问题在你的选择器中。 您需要更改代码中的'位置..！

 $('input').on("change", function() { if ($('input[type="checkbox"]').is(":checked")) { //or you can use $(this) instead of $(input[type="checkbox"]) to select itself alert("its checked"); } }); 

   Toggle