checkbox点击后出现div

HTML：

<div class="msg_editUrl_function">
<label class="labelChecked" for="url_checkbox">
<input type="checkbox" class="url_checkbox" name="source_url_checked" id="url_checkbox">

<span class="lbl_content"> 原文链接</span>
</label>
<div class="url_input_div" >
<input type="text" class="url_input" name="source_url">
</div>
</div> 

CSS：

.msg_editUrl_function {
padding-top: 20px;
margin: 0 90px 10px 0;
border-bottom: 1px solid #e7e7eb;

}

.labelChecked {
position: relative;
width: 90px;
height: 30px;
display: block;
}

.url_checkbox {
box-sizing: border-box;
padding: 0;
width: 18px;
height: 18px;
position: absolute;
}

.lbl_content {
display: inline-block;
position: absolute;
width: 60px;
height: 20px;
left: 30px;
bottom: 10px;
}

.url_input {
background-color: transparent;
border: 0;
outline: 0;
width: 100%;
height: 100%;
}

.url_input_div {
margin-left: 1.7em;
width: 508px;
position: relative;
height: 30px;
line-height: 30px;
vertical-align: middle;
font-size: 14px;
padding: 0 10px;
border: 1px solid #e7e7eb;
box-shadow: none;
-webkit-box-shadow: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background-color: #fff;
margin-bottom: 20px;
display:none;

}

JS：

$(".url_checkbox").change(function(){
if($(".url_checkbox").prop("checked")){
$(".url_input_div").css("display","block");

}else{
$(".url_input_div").css("display","none");
}
})