[jquery] is, attr, prop

 

<input type="checkbox" name="input_chk" value="val1" id="chk1"><label for="chk1">chk1</label><br>
<input type="checkbox" name="input_chk" value="val2" id="chk2"><label for="chk2">chk2</label><br>
<div><span class="test">$('#chk1').is(':checked')</span><span class="result check is"></span></div>
<div><span class="test">$('#chk1').attr('checked')</span><span class="result check attr"></span></div>
<div><span class="test">$('#chk1').prop('checked')</span><span class="result check prop"></span></div>
<br>

<input type="radio" name="input_rd" value="val1" id="rd1"><label for="rd1">rd1<br>
<input type="radio" name="input_rd" value="val2" id="rd2"><label for="rd2">rd2<br>
<div><span class="test">$('#rd1').is(':checked')</span><span class="result radio is"></span></div>
<div><span class="test">$('#rd1').attr('checked')</span><span class="result radio attr"></span></div>
<div><span class="test">$('#rd1').prop('checked')</span><span class="result radio prop"></span></div>
<br>

$(document).ready(function() {
    function test_check() {
        var result1 = $('#chk1').is(':checked');
        var result2 = $('#chk1').attr('checked');
        var result3 = $('#chk1').prop('checked');
        $('.result.check.is').text(result1);
        $('.result.check.attr').text(result2);
        $('.result.check.prop').text(result3);
        console.log('check', result1, result2, result3);
    }
    function test_radio() {
        var result1 = $('#rd1').is(':checked');
        var result2 = $('#rd1').attr('checked');
        var result3 = $('#rd1').prop('checked');
        $('.result.radio.is').text(result1);
        $('.result.radio.attr').text(result2);
        $('.result.radio.prop').text(result3);
        console.log('radio', result1, result2, result3);
    }
    $('input[name=input_chk').change(function(e) {
        test_check();
    });
    $('input[name=input_rd').change(function(e) {
        test_radio();
    });
    test_check();
    test_radio();
});