それが真実であるかない

Question

このトグルのチェックボックスの状態を取得し、私はそれは私が私の最高の私はすべてのソリューションを取得していないしてみてください真か偽のチェックボックスの状態を得ることはありません。それはいつも私に偽の値を与えトグルをクリックすると

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="toggle" id="switch"> 
 
<label for="switch">Toggle</label>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="toggle" id="switch"> 
 
    <label for="switch">Toggle</label>

そして一つのこと、私はスニペットを作って、すぐにその_thisの質問を見ることができるだけでvisibility

input[type=checkbox] { 
    /* width: 0; */ 
    /* height: 0; */ 
    visibility: hidden; 
} 

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"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="toggle" id="switch"> 
 
<label for="switch">Toggle</label>