Edit in JSFiddle

<input type="checkbox" id="chkProp">  Prop Checkbox
    <input type="button" value="Toggle state (prop)" id="btnProp"/>
    <hr/>
    <input type="checkbox" id="chkAttr"> Attr Checkbox
    <input type="button" value="Toggle state (attr)" id="btnAttr"/>
        <hr/>
        <input type="text" id="txtTest" value="Type Here:"/>
        <input type="button" id="alertTxtVal" value="Alert"/>

$(document).ready(function() {
$("#btnProp").click(function()
{
    if($("#chkProp").is(":checked"))
        $("#chkProp").prop("checked",false);
    else
        $("#chkProp").prop("checked",true);
});
    
    $("#btnAttr").click(function()
{
    $(this).after($("#chkProp").attr("checked"));
    if($("#chkAttr").is(":checked"))
        $("#chkAttr").removeAttr("checked");
    else
        $("#chkAttr").attr("checked",true);
});
    
    $("#alertTxtVal").click(function()
{
    
    alert("Attr : "+$("#txtTest").attr("value") +  ' and ' + "Prop : "+$("#txtTest").prop("value"));
    
});
});