I'm new to JavaScript and I have an issue.
I need to hide checkbox and then show the span with the content "canceled".
Can someone help me, please?
$(document).ready(function() {
// Find remove selected table rows
$(".delete-row").click(function() {
$('input[name="record"]').each(function() {
if ($(this).is(":checked")) {
if (confirm("Are you sure?")) {
$(this).hide();
$(this).closest('td').find('.canceled').show();
console.log("confirmed");
} else {
console.log("canceled the deletion");
}
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Address</td>
<td>
<input type="checkbox" name="record">
<span class="canceled" style="visibility: hidden">Canceled</span>
</td>
</tr>
<br />
<tr>
<td>First Name 2</td>
<td>Last Name 2 </td>
<td>Address 2</td>
<td>
<input type="checkbox" name="record">
<span class="canceled" style="visibility: hidden">Canceled</span>
</td>
</tr>
<button type="button" class="btn btn-danger marginLeft20 delete-row">Cancel</button>
Based on the code you provided, the alert is showing two times when you cancel for the second checkbox, this is because the first checkbox is hidden but not unchecked and the each loop condition checks for the checked checkbox. Thus, you can uncheck the checkbox together with hiding it.
$(document).ready(function() {
// Find remove selected table rows
$(".delete-row").click(function() {
$('input[name="record"]').each(function() {
if ($(this).is(":checked")) {
$(this).prop('checked', false);
if (confirm("Are you sure?")) {
$(this).hide();
$(this).siblings('.canceled').css('visibility', 'visible');
console.log("confirmed");
} else {
console.log("canceled the deletion");
}
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Address</td>
<td>
<input type="checkbox" name="record">
<span class="canceled" style="visibility: hidden">Canceled</span>
</td>
</tr>
<br />
<tr>
<td>First Name 2</td>
<td>Last Name 2 </td>
<td>Address 2</td>
<td>
<input type="checkbox" name="record">
<span class="canceled" style="visibility: hidden">Canceled</span>
</td>
</tr>
</table>
<button type="button" class="btn btn-danger marginLeft20 delete-row">Cancel</button>
on checkbox click
$(this).hide();
$('span:contains("canceled")').show();
Related
I am new to Javascript and already set up the collapsing table below with jquery. This already works. I can expand or collapse the complete table or expand and collapse columns by clicking on the row.
But this also changes the view by setting options like BRS or set (see HTML).
What I want is so control all this by the button "+" in the first column (see HTML).
Maybe it's simple maybe not. Can someone help me?
Thanks
<!DOCTYPE html><html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/jquery.js"></script><script type="text/javascript">
$(document).ready(function() {
$('.expandable').nextAll('tr').each( function() { // hide all at start
if(!($(this).is('.expandable')))
$(this).hide();
});
$('.expandable').click(function () { // toggle single by click
$(this).nextAll('tr').each( function() {
if($(this).is('.expandable')) {
return false; }
$(this).toggle();
});
});
$('#expand_all').click(function() { // show all
$('.expandable').nextAll('tr').each( function() {
if(!($(this).is('.expandable')))
$(this).show();
});
});
$('#collaps_all').click(function() { // hide all
$('.expandable').nextAll('tr').each( function() {
if(!($(this).is('.expandable')))
$(this).hide();
});
})
});
</script><title>ConfigPage for CAN on RestbusSimulationStation</title>
<body>
<h2>RSS</h2>
<button style="font-size:20px" id="expand_all">expand all</button><button style="font-size:20px" id="collaps_all">collaps all</button>
<table border="1">
<tr bgcolor="#fb9d00">
<th></th>
<th>FRAMES</th>
<th>ID</th>
<th>DLC</th>
<th>BRS</th>
<th>CYCLE/s</th>
<th>SET</th>
<th>SIGNALS</th>
<th>POS</th>
<th>Bits</th>
<th>select:</th>
<th>comput method</th>
<th>enum</th>
</tr>
<tr class="expandable">
<td><input type="button" value="+"></td>
<td><strong>EOCM_CAN8_MSG01</strong></td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr><td><td><td><td><td><td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span></td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767"><td></td>
<td><input type="number" name="enum" min="0" style="width: 3em;"></td>
</td>
</td></td></td></td></td></td></tr>
<tr class="expandable">
<td><input type="button" value="+"></td>
<td><strong>EOCM_CAN8_MSG01</strong></td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr><td><td><td><td><td><td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span></td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767"><td></td>
<td><input type="number" name="enum" min="0" style="width: 3em;"></td>
</td>
</td></td></td></td></td></td></tr>
</table>
</body>
</html>
Please have a look at this approach.
Instead of attaching click handler to <tr>; we are attaching it to the button like $('.expandable input[type=button]').click. Apart from that rest of the code is almost as it is.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.expandable').nextAll('tr').each(function() { // hide all at start
if (!($(this).is('.expandable')))
$(this).hide();
});
$('.expandable input[type=button]').click(function() { // toggle single by click
var trElem = $(this).closest("tr");
trElem.nextAll('tr').each(function() {
if ($(this).is('.expandable')) {
return false;
}
$(this).toggle();
});
});
$('#expand_all').click(function() { // show all
$('.expandable').nextAll('tr').each(function() {
if (!($(this).is('.expandable')))
$(this).show();
});
});
$('#collaps_all').click(function() { // hide all
$('.expandable').nextAll('tr').each(function() {
if (!($(this).is('.expandable')))
$(this).hide();
});
})
});
</script>
<title>ConfigPage for CAN on RestbusSimulationStation</title>
<body>
<h2>RSS</h2>
<button style="font-size:20px" id="expand_all">expand all</button>
<button style="font-size:20px" id="collaps_all">collaps all</button>
<table border="1">
<tr bgcolor="#fb9d00">
<th></th>
<th>FRAMES</th>
<th>ID</th>
<th>DLC</th>
<th>BRS</th>
<th>CYCLE/s</th>
<th>SET</th>
<th>SIGNALS</th>
<th>POS</th>
<th>Bits</th>
<th>select:</th>
<th>comput method</th>
<th>enum</th>
</tr>
<tr class="expandable">
<td>
<input type="button" value="+">
</td>
<td><strong>EOCM_CAN8_MSG01</strong>
</td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr>
<td>
<td>
<td>
<td>
<td>
<td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span>
</td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767">
<td></td>
<td>
<input type="number" name="enum" min="0" style="width: 3em;">
</td>
</td>
</td>
</td>
</td>
</td>
</td>
</td>
</tr>
<tr class="expandable">
<td>
<input type="button" value="+">
</td>
<td><strong>EOCM_CAN8_MSG01</strong>
</td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr>
<td>
<td>
<td>
<td>
<td>
<td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span>
</td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767">
<td></td>
<td>
<input type="number" name="enum" min="0" style="width: 3em;">
</td>
</td>
</td>
</td>
</td>
</td>
</td>
</td>
</tr>
</table>
</body>
</html>
I'm trying to do a filter that when a button pressed it will show only the row has checked input in the table.
<table class="table">
<tr>
<th>Name</th>
<th>InUse</th>
<th></th>
</tr>
<tr>
<td>foo 1</td>
<td>
<input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>foo 2</td>
<td>
<input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
Edit |
Details |
Delete
</td>
<tr/>
<!-- not checked -->
<tr>
<td>foo 3</td>
<td>
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</table>
You can use :has selector or .has() method to checking existence of element in parent.
$("button").click(function(){
$("table tr").has(".check-box:not(:checked)").hide();
});
table, tr, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Name</th>
<th>InUse</th>
</tr>
<tr>
<td>foo 1</td>
<td>
<input class="check-box" type="checkbox" checked disabled />
</td>
</tr>
<tr>
<td>foo 2</td>
<td>
<input class="check-box" type="checkbox" disabled />
</td>
</tr>
<tr>
<td>foo 3</td>
<td>
<input class="check-box" type="checkbox" checked disabled />
</td>
</tr>
<tr>
<td>foo 4</td>
<td>
<input class="check-box" type="checkbox" disabled />
</td>
</tr>
</table>
<button>Only checked</button>
You can test code on full of you html in demo
Please use following jquery code. Onclick of submit button all the rows with unchecked checkboxes will be hide.
$(document).ready(function(){
$("input[type=submit]").click(function () {
$("input:not(:checked)").each(function () {
$(this).closest('tr').hide();
});
});
});
Please use jquery and place this code in your tag
$(document).ready(function () {
$("#btnClick").on("click", function () {
$(".table tr").each(function () {
if (!$(this).find("td input:checkbox").is(":checked")) {
$(this).hide();
}
})
})
});
This should work with your case.
This is a much simpler approach. Pass this to the onclick() event handler in your HTML and use jQuery:
<input type="checkbox" onClick="disablerow(this);">
function disablerow(el) {
if (el.checked == true) {
$(el).closest('tr').find(":input:text(:first)").attr('disabled', false);
}
else {
$(el).closest('tr').find(":input:text(:first)").attr('disabled', true);
}
}
Following is my code snippet from smarty template.
<input type="radio" name="newsletter_call_to_action_status" value="1" checked='checked' onclick="select_option(this.value);" {if $data.newsletter_call_to_action_status=='1' } checked {/if}>Yes
<input type="radio" name="newsletter_call_to_action_status" value="0" onclick="select_option(this.value);" {if $data.newsletter_call_to_action_status=='0' } checked {/if}>No
<tr id="action_link_no" {if $data.newsletter_call_to_action_status=='1' }style="display:;" {else}style="display:none;" {/if}>
<td colspan="2"> </td>
</tr>
<tr class="action_link_yes" height="30">
<td align="right" width="300">
<label><b>{'Enter call to action text'|signal_on_error:$error_msg:'newsletter_call_to_action_text'}</b> <strong style="color:red">*</strong>
</label>
</td>
<td>
<input type="text" name="newsletter_call_to_action_text" id="newsletter_call_to_action_text" value="{$data.newsletter_call_to_action_text}" maxlength="50" class="inputfield">
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr class="action_link_yes" height="30">
<td align="right" width="300">
<label><b>{'Enter call to action link'|signal_on_error:$error_msg:' newsletter_call_to_action_link'}</b> <strong style="color:red">*</strong>
</label>
</td>
<td>
<input type="text" name="newsletter_call_to_action_link" id="newsletter_call_to_action_link" value="{$data.newsletter_call_to_action_link}" class="inputfield">
</td>
</tr>
Now, on form load, if newsletter_call_to_action_status == 1 then it should show the tr with class=action_link_yes, and hide the tr using class=action_link_no when the value is 0.
How can I achieve this?
<input type="radio" value="1" checked="checked">YES</input>
<input type="radio" value="0">NO</input>
<table class="tbl">
<tr class="action-yes">
<td>Here is stuff to show on yes</td>
</tr>
<tr class="action-no">
<td>stuf to show on no</td>
</tr>
</table>
$(document).ready(function () {
var status = $('input:radio:checked').val();
if (status == 1) {
$('table tr.action-yes').show();
$('table tr.action-no').hide();
} else {
$('table tr.action-yes').hide();
$('table tr.action-no').show();
}
});
Demo:http://jsfiddle.net/zeewon/TKZn6/
$('#form').load(function(){
if(newsletter_call_to_action_status == 1) {
$('.class=action_link_yes').show();
$('.class=action_link_no').hide();
}
else {
$('.class=action_link_yes').hide();
$('.class=action_link_no').show();
}
});
Try this:
$(document).ready(function(){
$(".radio").change(function(){
if($(this).val() == '1')
{
$(".action_link_no").hide();
$(".action_link_yes").show();
}
else if($(this).val() == '0')
{
$(".action_link_yes").hide();
$(".action_link_no").show();
}
});
});
here .radio is the class of radio buttons
I'm looking for a Javascript or jQuery solution, either works.
Anyway, when a user selects one of the choices for the radio buttons, I want a different set of checkboxes to show up. So, if a user chooses By Name, the name checkboxes will show up. And then when the user chooses By Title, the name checkboxes will disappear and the title checkboxes will show up.
When a page loads, and an option is not chosen, no checkboxes should appear
Here is what the HTML looks like:
<table>
<tr>
<td><input type="radio" name="selectType" value="byName" />By Name</td>
<td><input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle2" />Title 2</td>
</tr>
</table>
What would this code look like?
I would use data attributes to reference groups of checkboxes. This way you can make your code really flexible and unobtrusive:
$('.type-check').change(function() {
$('.type-group').hide().filter('.type-group-' + $(this).data('type')).show();
});
HTML sample:
<tr>
<td><input type="radio" name="selectType" class="type-check" data-type="name" value="byName" /> By Name</td>
<td><input type="radio" name="selectType" class="type-check" data-type="title" value="byTitle" /> By Title</td>
</tr>
http://jsfiddle.net/D8s9G/
First give your checkboxes classes..
<input type="checkbox" name="selectName1" class="name"/>Name 1
<input type="checkbox" name="selectName2" class="name"/>Name 2
do the same for titles and give them a class name of 'title' and for your radios too..
<input type="radio" name="selectType" value="byName" class="radioName" />
then;
$(document).ready(function () {
$('.radioName').click(function () {
$('.name').show();
$('.title').hide();
});
//same logic for titles..
});
Here is a working solution - http://jsfiddle.net/FloydPink/fkvSg/
jQuery:
$('.name').closest('tr').toggle(false);
$('.title').closest('tr').toggle(false);
$('input[name=selectType]').change(function () {
var byNameSelected = $(this).val() == 'byName';
$('.name').closest('tr').toggle(byNameSelected);
$('.title').closest('tr').toggle(!byNameSelected);
});
HTML:
<table>
<tr>
<td>
<input type="radio" name="selectType" value="byName" />By Name</td>
<td>
<input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName2" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle2" />Title 2</td>
</tr>
</table>
I have added css classes to all the four checkboxes, so that the group of 'Name' and 'Title' checkboxes could be grouped.
You can select the inputs with their name and show or hide the relevant inputs:
$('input[value*="byName"]').click( function() {
$('input[name*="selectName1"]').show();
$('input[name*="selectTitle1"]').hide();
}
$('input[value*="byTitle"]').click( function() {
$('input[name*="selectName1"]').hide();
$('input[name*="selectTitle1"]').show();
}
The following code it is auto-explained:
HTML:
<table cellspacing="1" class="CRMP_WP_QUICKADS_PLUGIN">
<tr id="CRMP_WP_QUICKADS_tr_in_content">
<td>
<table>
<tr>
<td>
<input type="radio" name="in_content" value="1">
</td>
<td>
Enabled
</td>
</tr>
<tr>
<td>
<input type="radio" name="in_content" value="0">
</td>
<td>
Disabled
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="2">
Hover Ads
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
...
</table>
javascript:
$("input[name='in_content']").click(function(){
if ($(this).val()){
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).show();
} else{
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).hide();
}
});
The hide/show effect is not running.-
Does this work?
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll()
.slice(0,6)
.each(function(index, element) {
element.hide();
});
// is not enough:
if ($(this).val())
// it must be:
if ($(this).val() == 1)