jQuery如果复选框被选中
问题描述:
我有一个函数低于我想只在同一tr中的复选框被选中时触发。请告诉我我做错了什么,通常的方法不起作用。由于jQuery如果复选框被选中
JS
$(".add_menu_item_table").live('click', function() {
var value_td = $(this).parents('tr').find('td.td_name').text();
if ($('input.checkbox_check').attr(':checked')); {
var newDiv = $('<div class="div_menu_button"></div>');
var showDiv = $('<div id="show'+ "0" + numShow++ +'" class="menu_button_info hidden"></div>');
var toggleTrigger = $('<a id="toggleshow'+ "0" + numToggle++ +'" data-target="#show'+ "0" + numTarget++ +'" class="toggle_trigger actions"> </a><div style="padding:5px"></div>');
var menuForm = $('<form id="menu_edit_form'+ "0" + numForm++ +'" class="menu_creation_form"></form>');
$('#created_buttons_list').append(
newDiv.text(value_td));
newDiv.wrap("<li></li>");
newDiv.append(toggleTrigger);
newDiv.append(showDiv);
showDiv.append(menuForm);
menuForm.html('<label for="navigation_label">Navigation Label</label><input id="navigation_label'+ "0" + numLabelone++ +'" type="text" placeholder="Navigation Label" name="navigation_label"><label for="attribute">Attribute</label><input id="attribute'+ "0" + numLabeltwo++ +'" type="text" type="text" placeholder="Attribute" name="attribute"><label for="url">URL</label><input id="url'+ "0" + numLabelthree++ +'" type="text" type="text" placeholder="URL" name="url"><input type="button" value="Remove" class="button_link remove_button"> <input type="reset" value="Cancel" class="button_link">');
}
});
var numToggle = 0;
var numShow = 0;
var numTarget = 0;
var numForm = 0;
var numLabelone = 0;
var numLabeltwo = 0;
var numLabelthree = 0;
HTML
<table width="316px" border="0" cellspacing="0" cellpadding="0" id="table-data">
<tbody>
<tr>
<td width="20px"><input type="checkbox" style="width:20px;" value="1" name="checkbox"></td>
<td width="200px"><a href="/admin/feedbackmanager/sortby/2/sortdesc/0">Page Name</a></td>
<td width="20px"><a href="/admin/feedbackmanager/sortby/3/sortdesc/0">Add</a></td>
</tr>
<tr>
<td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td>
<td class="td_name">Timeplot</td>
<td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td>
</tr>
<tr>
<td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td>
<td class="td_name">Operations Manuals</td>
<td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td>
</tr>
<tr>
<td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td>
<td class="td_name">Company Structure</td>
<td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td>
</tr>
<tr>
<td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td>
<td class="td_name">CMS Report</td>
<td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td>
</tr>
<tr>
<td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td>
<td class="td_name">Test Document</td>
<td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td>
</tr>
<tr>
<td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td>
<td class="td_name">Test CMS page</td>
<td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td>
</tr>
</tbody>
</table>
答
if ($('input.checkbox_check').is(':checked')) {
答
的jQuery 1.6或更高版本:
if ($('input.checkbox_check').prop('checked')) {
//blah blah
}
的跨浏览器兼容的方式,以确定是否一个复选框被选中 是使用属性https://api.jquery.com/prop/
+6
请注意,“.prop()方法只获取匹配集中第一个元素的属性值。”请参阅http://api.jquery.com/prop/ –
答
这$('#checkboxId').is(':checked')
因为如果被选中
&验证这一点$("#checkboxId").prop('checked', true)
检查
&这个$("#checkboxId").prop('checked', false)
取消选中
答
查看主要不同之间ATTR | PROP | IS如下:
Source: http://api.jquery.com/attr/
$("input")
.change(function() {
var $input = $(this);
$("p").html(".attr('checked'): <b>" + $input.attr("checked") + "</b><br>" +
".prop('checked'): <b>" + $input.prop("checked") + "</b><br>" +
".is(':checked'): <b>" + $input.is(":checked") + "</b>");
})
.change();
p {
margin: 20px 0 0;
}
b {
color: blue;
}
<meta charset="utf-8">
<title>attr demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
</body>
</html>
答
如果上述解决方案均未以任何理由的工作,就像我的情况下,试试这个:
<script type="text/javascript">
$(function()
{
$('[name="my_checkbox"]').change(function()
{
if ($(this).is(':checked')) {
// Do something...
alert('You can rock now...');
};
});
});
</script>
'$( 'input.checkbox_check')。checked'如果被选中则返回'true',否则返回'false' – mmcrae
@mmcrae,这是不正确的。 jQuery对象没有“checked”属性。我想你的意思是'$('input.checkbox_check')[0] .checked' – Paul