カスタム]チェックボックス：StackOverflowの上</p> <p><a href="https://jsfiddle.net/twrqkudd/3/" rel="nofollow noreferrer">enter link description here</a></p> <p>も利用可能：どのようにチェックボックスがオンになっているか、私は、この使用して、カスタムのチェックボックスを作っていない

Question

かどうかを確認するためにenter link description here

をしかし、私はしようとしていますボックスがチェックされているかどうかチェックしていますが、失敗しました。bcz jqueryは何も表示していません。

$(document).ready(function() { 
 
    var ckbox = $('#demo_box_2'); 
 

 
    $('#demo_box_2').on('click',function() { 
 
     if (ckbox.is(':checked')) { 
 
      alert('You have Checked it'); 
 
     } else { 
 
      alert('You Un-Checked it'); 
 
     } 
 
    }); 
 
});

input[type=checkbox].css-checkbox { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; } 
 
input[type=checkbox].css-checkbox + label.css-label { padding-left:20px; height:15px; display:inline-block; line-height:15px; background-repeat:no-repeat; background-position: 0 0; font-size:15px; vertical-align:middle; cursor:pointer; } 
 
input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px; } .css-label{ background-image:url(http://csscheckbox.com/checkboxes/lite-x-red.png); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input id="demo_box_2" class="css-checkbox" type="checkbox" /> 
 
<label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label> 
 
</form>

私は私が正しくjQueryのが、まだ理解できないためにIDを渡していますか間違っているところを知りません。

Answer 1

、そのよう：

$("input[type=checkbox]").click(function() { 
    var msg = ""; 
    $("input[type=checkbox]").each(function() { 
    if ($(this).is(":checked")) { 
     msg += "#" + $(this).attr("id") + " is checked!\n"; 
    } else { 
     msg += "#" + $(this).attr("id") + " is NOT checked!\n"; 
    } 
    }); 
    alert(msg); 
}); 

Here is the JSFiddle demo

Answer 2

コードを変更していますが、idセレクタの代わりに$(this)を使用しました。あなたがそうするようにjQueryの.is(":checked")を使用することができます

$(document).ready(function() { 
 
    
 

 
    $('#demo_box_2').on('click',function() { 
 
     if ($(this).is(':checked')) { 
 
      alert('You have Checked it'); 
 
     } else { 
 
      alert('You Un-Checked it'); 
 
     } 
 
    }); 
 
});

input[type=checkbox].css-checkbox { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; } 
 
input[type=checkbox].css-checkbox + label.css-label { padding-left:20px; height:15px; display:inline-block; line-height:15px; background-repeat:no-repeat; background-position: 0 0; font-size:15px; vertical-align:middle; cursor:pointer; } 
 
input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px; } .css-label{ background-image:url(http://csscheckbox.com/checkboxes/lite-x-red.png); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input id="demo_box_2" class="css-checkbox" type="checkbox" /> 
 
<label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label> 
 
</form>