I have a function below that I want to only trigger when a checkbox in the same tr is checked. Please tell me what I am doing wrong, the usual methods are not working. Thanks
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;
<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>
</tbody>
</table>
This question is related to
jquery
checkbox
if-statement
for jQuery 1.6 or higher:
if ($('input.checkbox_check').prop('checked')) {
//blah blah
}
the cross-browser-compatible way to determine if a checkbox is checked is to use the property https://api.jquery.com/prop/
See main difference between ATTR | PROP | IS below:
Source: http://api.jquery.com/attr/
$( "input" )_x000D_
.change(function() {_x000D_
var $input = $( this );_x000D_
$( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +_x000D_
".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +_x000D_
".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );_x000D_
})_x000D_
.change();
_x000D_
p {_x000D_
margin: 20px 0 0;_x000D_
}_x000D_
b {_x000D_
color: blue;_x000D_
}
_x000D_
<meta charset="utf-8">_x000D_
<title>attr demo</title>_x000D_
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<input id="check1" type="checkbox" checked="checked">_x000D_
<label for="check1">Check me</label>_x000D_
<p></p>_x000D_
_x000D_
_x000D_
_x000D_
</body>_x000D_
</html>
_x000D_
If checked:
$( "SELECTOR" ).attr( "checked" ) // Returns ‘true’ if present on the element, returns undefined if not present
$( "SELECTOR" ).prop( "checked" ) // Returns true if checked, false if unchecked.
$( "SELECTOR" ).is( ":checked" ) // Returns true if checked, false if unchecked.
Get the checked val:
$( "SELECTOR:checked" ).val()
Get the checked val numbers:
$( "SELECTOR:checked" ).length
Check or uncheck checkbox
$( "SELECTOR" ).prop( "disabled", false );
$( "SELECTOR" ).prop( "checked", true );
to check input and get confirm by check box ,use this script...
$(document).on("change", ".inputClass", function () {
if($(this).is(':checked')){
confirm_message = $(this).data('confirm');
var confirm_status = confirm(confirm_message);
if (confirm_status == true) {
//doing somethings...
}
}});
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label> check action </lable>
<input class="inputClass" type="checkbox" data-confirm="are u sure to do ...?" >
_x000D_
If none of the above solutions work for any reason, like my case, try this:
<script type="text/javascript">
$(function()
{
$('[name="my_checkbox"]').change(function()
{
if ($(this).is(':checked')) {
// Do something...
alert('You can rock now...');
};
});
});
</script>
this $('#checkboxId').is(':checked')
for verify if is checked
& this $("#checkboxId").prop('checked', true)
to check
& this $("#checkboxId").prop('checked', false)
to uncheck
Source: Stackoverflow.com