I have a dynamically loaded table where each row has a checkbox option, with an assigned #id of either 1,2 or 3. I need to make a function that will shows a hidden div corresponding to the #id of the checkbox checked. I'm currently using .change() to trigger the function, but this ends up showing the hidden div when unchecking a box, which I do not want to happen. Is there another way to trigger this function for just on "checked", and not "unchecked". See code below:
<tr>
<td >
<input id="1" class="link_contact" type="checkbox"/>
</td>
</tr>
<tr>
<td >
<input id="2" class="link_contact" type="checkbox"/>
</td>
</tr>
<tr>
<td >
<input id="3" class="link_contact" type="checkbox"/>
</td>
</tr>
<div class="1" style="display:none;"> Some Hidden Text</div>
<div class="2" style="display:none;"> Some Hidden Text</div>
<div class="3" style="display:none;"> Some Hidden Text</div>
<script>
$(document).ready(function () {
$(".link_contact").change(function () {
$("." + $(this).attr('id')).fadeIn(800);
$("." + $(this).attr('id')).delay(7000).fadeOut(800);
});
});
</script>
Thanks,
Mark
Do the actions only if the checkbox is checked
$(document).ready(function () {
$(".link_contact").change(function () {
if (this.checked) {
$("." + this.id).stop(true, true).fadeIn(800).delay(7000).fadeOut(800);
$('.dialog_warning').fadeOut(800);
}
});
});
Demo: Fiddle
You need to use :checked selector with in the function is()
<script>
$(document).ready(function () {
$(".link_contact").change(function () {
if($(this).is(":checked")) {
$("." + $(this).attr('id')).fadeIn(800);
$("." + $(this).attr('id')).delay(7000).fadeOut(800);
$('.dialog_warning').fadeOut(800);
}
});
});
</script>
check this http://api.jquery.com/checked-selector/
Missing ending quote (after style attribute) in your html tag
<div class="3" style="display:none;> Some Hidden Text</div>
Related
I have some repeat button control functions as below, is there a way to iterate them and reduce amount of code?
$('[id$=cBC1]').change(function () {
if ($(this).is(':checked')) {
$(".cBC1_Row").prop("disabled", true);
}
else {
$(".cBC1_Row").prop("disabled", false);
}
$('select').material_select();
});
$('[id$=cBC2]').change(function () {
if ($(this).is(':checked')) {
$(".cBC2_Row").prop("disabled", true);
}
else {
$(".cBC2_Row").prop("disabled", false);
}
$('select').material_select();
});
...
Add HTML code as requested, it's wrapped in a visualforce page, each checkbox will manage text fields on the same row in table.
<table>
...
<tbody>
<tr>
<td>
<apex:inputCheckbox id="cBC1"/>
<label for="j_id0:j_id1:cBC1"></label>
</td>
<td>
<div class="input-field">
<apex:inputField styleClass="validate cBC1_Row"/>
</div>
</td>
<td>
<div class="input-field">
<apex:inputField styleClass="validate cBC1_Row"/>
</div>
</td>
</tr>
<tr>
<td>
<apex:inputCheckbox id="cBC2"/>
<label for="j_id0:j_id1:cBC2"></label>
</td>
<td>
<div class="input-field">
<apex:inputField styleClass="validate cBC2_Row"/>
</div>
</td>
<td>
<div class="input-field inline">
<apex:inputField styleClass="validate cBC2_Row"/>
</div>
</td>
</tr>
</tbody>
</table>
You could drop the last number in the selector, and use "attribute contains" instead, assuming you don't have several elements containing the string cBC.
An other, and better option, would be to use classes
$('[id*=cBC]').on('change', function () {
$(".cBC"+ this.id.match(/\d+$/)[0] +"_Row").prop("disabled", this.checked);
$('select').material_select();
});
Yes, following your pattern you can do:
for (let i = 1; i < amoutOfIds; i++) {
$('[id$=cBC'+i+']').change(function () {
if ($(this).is(':checked')) {
$(".cBC"+i+"_Row").prop("disabled", true);
}
else {
$(".cBC"+i+"_Row").prop("disabled", false);
}
$('select').material_select();
});
}
You have to set correctly the amountOfIds you have, and also you should be changing let i = 1 also to begin with the first id you have.
If you can refactor your event handler to work for each element, you could write a single jquery selector and bind the same anonymous event handler to both elements. It is difficult to determine whether or not this refactoring is feasible without seeing the markup of the elements your script is interacting with.
From your code it seems the IDs are matched.
Why not using:
$('[id^="cBC"]').change(function () {
var _id = $(this).id();
$("."+_id+"_Row").prop("disabled", $(this).is(':checked'));
$('select').material_select();
});
Hi I am trying to show hide input element based on selection value of another element.
However I am unable to achieve it. I am not sure what is wrong I am doing.
The JS Fiddle is here :
https://jsfiddle.net/rovvLt9e/1/
<div>
<table>
<tr id="type">
<td height="30">Type</td>
<td>
<input type="radio" name="type" value="Document" checked>Document
<input type="radio" name="type" value="Parcel">Parcel
</td>
</tr>
</br>
</br>
<tr id="height">
<td height="40">Approx weight of consignment</td>
<td>
<select name="weight">
<option selected>200gms</option>
<option>200 - 500gms</option>
<option>500 - 750gms</option>
<option>750gms - 1Kg</option>
<option>1Kg - 5Kg</option>
<option> > 5Kg</option>
</select>
</td>
</tr>
</table>
</div>
</br></br>
<div id="text"> text</div>
The Jquery is :
$(document).ready(function () {
if ($('#type').val() == "Parcel") {
$('#height').show();
}
else {
$('#height').hide();
}
});
https://jsfiddle.net/rovvLt9e/1/
Try to use change event to accomplish your task,
$(document).ready(function() {
var elem = $('#height');
var radios = $(':radio[name=type]').change(function() {
elem.toggle(radios.filter(":checked").val() == "Parcel");
});
});
And note, you have to use attribute selector here as there was no element with id type.
DEMO
There is no element with id type. Bind change event to input[name=type] and toggle visibility like following.
$('input[name=type]').change(function() {
$('#height').toggle(this.value=="Parcel");
});
$('input[name=type]:checked').change(); //to set initial state
UPDATED FIDDLE
Try using selector #type input , .change() event
$(document).ready(function() {
var h = $("#height");
$("#type input").change(function() {
if (this.checked && this.value == "Parcel") {
h.show();
} else {
h.hide();
}
}).change()
});
jsfiddle https://jsfiddle.net/rovvLt9e/6/
<tr>
<td>Category 1</td>
<td class="data">
<ul>
<li>
<input name="items[]" type="checkbox" value="1"> Item 1
<input name="items[]" type="checkbox" value="2"> Item 2
</li>
</ul>
</td>
<td>
<button class="save">Save</button>
</td>
</tr>
<tr>
<td>Category 2</td>
<td class="data">
<ul>
<li>
<input name="items[]" type="checkbox" value="1"> Item 1
<input name="items[]" type="checkbox" value="2"> Item 2
</li>
</ul>
</td>
<td>
<button class="save">Save</button>
</td>
</tr>
The table is dynamically created with jquery. So, what I want is when I click one of the save button, I want to fetch the checked data from the checkbox of that only consisting that clicked button, not from the other checkboxes.
use each function of Jquery to get all the checked boxes corresponding to the save button like below
$(document).on("click", ".save", function () {
$(this).closest("tr").find(".data [type=checkbox]:checked").each(function(){
alert($(this).val());
});
})
Try this, i am using this code to display values but you can use it in for save....
$(document).ready(function() {
$("button").click(function(){
var chkvalue = [];
$.each($("input[name='items']:checked"), function(){
chkvalue.push($(this).val());
});
alert("My chkvalues are: " + chkvalue.join(", "));
});
});
Use closest()
$(document).on("click", ".save", function () {
$(this).closest("tr").find(".data [type=checkbox]:checked");
})
DEMO
Try,
$(document).on("click",".save",function(){
var checkedValues = $(this).closest("tr").find(".data :checked").map(function(){
return this.value;
}).get(); //["1","2"] depends on user selection
});
In the place of document use the closest static parent of .save button.
DEMO
you have to set checkid or checkclass for Check box :
$('#checkid').val();
$('.checkclass').val();
or
$("input[type='checkbox']").val();
or
$('#test').click(function() {
alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />
i think using this you can find the value of your check boxes
$('.save').on('click',function(){
$(this).prev().find("input[type='checkbox']").prop('checked');
})
I have checkboxes (initially none selected) in a loop and want to show additional icon next to the checkbox but ONLY when the checkbox is selected. I have included "if" statement but when the user selects a checkbox the icon does not appear. How can I do this
<div id="divItems">
<table> <thead></thead><tbody>
#foreach (Employee item in Model)
{
<tr>
<td> <label class="checkbox">
<input type="checkbox" name="#(item.Name)" id="#(item.Name)" class="clink" value="(item.FullName)" /> #item.Name </label>
</td>
<td>
<a href="#MModal" class="open-Modal" data-id="(item.MapSPNames)"
data-toggle="modal">
<i class="icon-edit" title="Filter"></i>
</a>
</td>
</tr>
}
</tbody></table>
</div>
Edit
Make a function and call it wherever you want:
function showChecked() {
$(".open-Modal").each(function () {
$(this).hide();
});
$(".clink").each(function () {
if ($(this).is(":checked"))
$(this).parent().next().find(".open-Modal").show();
else
$(this).parent().next().find(".open-Modal").hide();
});
}
Now call the function showChecked(), according to your need. Like on change of the checkbox:
$(".clink").on("change", function () {
showChecked();
});
Also call this function on $(document).ready or where you are loading the html of your div id="divItems"
I have a table with a checkbox .
I need to know which table rows was checked,
after clicking the Update button.
<div id='ggg' style="position:absolute; bottom:0px" id=>
<table class="display" id="poll">
<th>Polling</th>
<th>rrd</th>
<tr>
<td>ping</td>
<td>10.rrd</td>
<td>
<input type="checkbox" name="myTextEditBox" value="checked"/>
</td>
</tr>
<tr>
<td>snmp</td>
<td>11.rrd</td>
<td>
<input type="checkbox" name="myTextEditBox" value="checked" />
</td>
</tr>
</table>
<form>
<input type='button' id='update' value='update'>
</form>
</div>
Try this
$('#update').on('click',function(){
$('#poll').find('input:checked').closest('tr').css('background','green');
});
DEMO
You can use :checked selector to get checked checkbox along with .closest(tr) to get row. Try this:
checkedrows = $('input:checked').closest('tr');
Try this
$("#update").click(function () {
$('input:checked').each(function () {
alert($(this).closest("tr").text());
});
});
Demo
Edit
$("#update").click(function () {
$("#poll").find('input:checked').each(function () {
alert($(this).closest("tr").text());
});
});
You can use like this:
if you want to highlight to tr:
$('#update').on('click',function(){
$(':checked').parents('tr').css('background','#ff0');
});
if you want to highlight to td:
$('#update').on('click',function(){
$(':checked').parent().css('background','#ff0');
});
$('#update').click(function() {
var checkboxes = $('#poll').find('input:checked').closest('tr');
// this will give you which table rows was checked
});