The following code adds a class to the parent of the checkbox / radio button to highlight the radio button along with the label.
Here is the jQuery code which I need to convert to JavaScript.
I am new to both jQuery and JavaScript.
Any pointers will be appreciated !!
$('form input[type=checkbox]').click ( function(){
var $this = $(this);
if (this.checked)
{ $(this).parent().addClass("highlight"); }
else
{ $(this).parent().removeClass("highlight"); }
})
$('form input[type=radio]').change(function(){
var $this = $(this);
$this.parent().parent().find('label.highlight').removeClass('highlight');
$(this).parent().addClass("highlight");
});
I think I found the solution to this.
But I am sure this is not the most efficient code so if you can think of better options then do let me know.
function checkBox(obj) {
object=obj;
if (object.checked){
object.parentElement.classList.add("highLight1");
}
else {
object.parentElement.classList.remove("highLight1");
}
}
function highlight(obj) {
object = obj;
var radios = document.getElementsByName("A1");
for(var i = 0; i < radios.length; i++) {
if(radios[i].checked){
radios[i].parentElement.classList.add("highLight1");
}
else {
radios[i].parentElement.classList.remove("highLight1");
}
}
}
Related
I'm trying to do this, but the loop ends after the first trigger. Any ideas to help me out?
$(document).on('click', '#configurator .myalbumimgs .autofill', function(e) {
e.preventDefault();
var nb_of_images = $('#grid div.configimg').length;
for (i = 0; i < nb_of_images; i++) {
alert(i);
$('.imgpicker .photo .add').eq(i).trigger('click');
}
});
Edit 1: Everything works fine if I remove $('.imgpicker .photo .add').eq(i).trigger('click'); and just let the loop run.
If I put a number in, like eq(3) selects the right one, but only that one. Then it stops as before.
No errors in console :S
Edit 2: Found out the correct solution, my mistake with .eq on the wrong element. Thanks for all suggestions! Correct code:
$(document).on('click', '#configurator .myalbumimgs .autofill', function(e) {
e.preventDefault();
if ($(this).not('.done')) {
var multiselector_nbimages = $('#grid').attr('data-nbimages');
var nb_images_selected = parseInt($('#grid div.configimg').not('.temp').length);
var max_nb_images = parseInt(multiselector_nbimages);
if (nb_images_selected < max_nb_images) {
var album_images = $(this).parent().parent().children('.imgpicker').children('.photo');
var nb_of_grid_images = $('#grid div.configimg.temp').length;
for (i = 0; i < nb_of_grid_images; i++) {
album_images.eq(i).children('.add').not('.selected').trigger('click');;
}
$(this).addClass('done');
} else {
alert(lang_valid_max_nb_of_photos);
}
}
});
jquery has built in each method .
$('#configurator .albumbtn.autofill').on('click', function(e) {
e.preventDefault();
//Iterate through every configimg
$('#grid div.configimg').each(function(el) {
// $(this) is current element in the list
if($(this).hasClass('someclass')) { $(this).trigger('click') }
})
});
I am using this function to show and hide objects. I think the reason why this isn't working is because I am not selecting the object correctly.
function generalHideOrShow(element)
{
if (element instanceof Element)
{
//single element passed
element = [element]; //mimic node list
}
if(element.length && element.length > 0 && element[0] instanceof Element)
{
//node list
for (var i = 0; i < element.length; ++i)
{
if (element[i].getAttribute("data-hidden") == "true" )
{
$(element[i]).removeClass("hidden");
element[i].setAttribute("data-hidden", false);
}
else
{
element[i].setAttribute("data-hidden", true);
$(element[i]).addClass("hidden");
}
}
}
else
{
return false;
}
}
d3.selectAll("#button1").on("click", function(){
generalHideOrShow($("#buttonsRight")); //selection
});
var buttons = d3.select("#svg").append("g").attr("id", "buttons");
var buttonsRightTop = buttons.append("g").attr("id", "buttonsRightTop");
var buttonsRight = buttonsRightTop.append("g").attr("id", "buttonsRight");
I wish to select 'buttonsRight' as above.
When I change it to select all 'div' tags to test it, it works.
generalHideOrShow($("div")); //selection
I have tried different ways of selecting it such as :
generalHideOrShow($(buttonsRight)); //selection
generalHideOrShow($(".buttonsRight")); //selection
generalHideOrShow($("g#buttonsRight")); //selection
None are working. How do I select this right side buttons ?
Since you are using jQuery, I think you can write it as
function generalHideOrShow(element) {
var $elem = $(element);
if ($elem.length) {
var $hid = $elem.filter('[data-hidden="true"]').removeClass('hidden').attr("data-hidden", false);
$elem.not($hid).addClass('hidden').attr("data-hidden", true);
} else {
return false;
}
}
This is how I managed to do it:
Call the generalHideOrShow Function with the onClick:
d3.select("thisButton").on("click", function(){
generalHideOrShow("#buttonsRight");
}
set the class to visible first so you can check the class later:
buttonsRight.classed("visible", true);
Then do if statements to check if the class is hidden or visible
function generalHideOrShow(element) {
console.log(element[0].getAttribute('class'));
if(element[0].getAttribute('class') === "visible"){
element[0].setAttribute('class', "hidden");
} else{
element[0].setAttribute('class', "visible");
}
On my webpage, I have a table in which there's a radio button for each row. The name of radio buttons is the same for all rows to access them as a group. I have a button which alerts the row number whose radio button is checked. I'd like to access individual elements of the table of that row as well. Any thoughts as top how I might be able to achieve this would be very welcome.
Here's a Fiddle for the issue:
http://jsfiddle.net/Gz668/13/
On the click of the button "edireq", it currently alerts the row number whose radio button is checked. I'd like to access the values of other fields of the table (requestor, approver, status etc. too.)
Here's the jquery code
$("#edireq")
.button()
.click(function () {
var ele = document.getElementsByName('reqradio');
var len = ele.length;
var flag = -1;
for (var j = 0; j < len; j++) {
if (ele[j].checked) {
flag = j;
}
}
if (flag > -1) {
alert("Row : " + (flag + 1));
} else {
alert("Select a row first");
}
});
Thanks.
You have an odd mix of native javascript and jQuery. You can use the :checked selector to get the chosen radio button, then get the closest tr and read the text of each td within that row. Try this:
$(document).ready(function () {
$('#reqtablenew tr').click(function () {
$('#reqtablenew tr').removeClass("active");
$(this).addClass("active").find('input[name="reqradio"]').prop('checked', true);
});
$("#edireq").button().click(function () {
var $ele = $('input[name="reqradio"]:checked');
if ($ele.length) {
var $tds = $ele.closest('tr').find('td');
var id = $tds.eq(1).text();
var requestor = $tds.eq(2).text();
// and so on..
alert(id);
alert(requestor);
}
else {
alert("Select a row first");
}
});
});
Example fiddle
Try this:
var list = ["Req id","Requestor","Approver","Status","Product","Version","Source","Destination"]; //list of title
if (flag > -1) {
$(".active").find("td:gt(0)").each(function(i){
console.log(list[i]+": "+$(this).text());
});
}
Fiddle here.
I came up with the following:
http://jsfiddle.net/Gz668/16/
$(document).ready(function () {
$("table").on("click", "tr", function(){
$(".active").removeClass("active");
$(this).toggleClass("active");
$(this).find("input[type='radio']").prop("checked", true);
});
$("#edireq").on("click", function(){
activeRow=$(".active");
cells=activeRow.children();
if(cells.length >0){
row={
select:cells[0],
requestId:cells[1],
requestor:cells[2],
approver:cells[3],
status:cells[4],
product:cells[5],
version:cells[5],
source:cells[6],
destination:cells[7]
};
alert(row.requestor.textContent);
}
})
});
I am developing an app that stays in the website itself, and I want every link to call a function. I have tried this:
HTML
link<br>
link 2
Javascript
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
a[i].onclick = function () {
return false
}
}
What is wrong? It doesn't work.
Since it's not jQuery, you should use the preventDefault function.
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
a[i].onclick = function (e) {
e.preventDefault();
doSomething();
}
}
edit for pure javascript solution
document.addEventListener("click", function(e){
if (e.nodeName==="A"){
e.preventDefault();
return false;
}
}, false);
This will only add one single event to the document and prevent all clicks on anchor elements only.
I removed the old solution because of the comment, that this wasn't a jquery question
Don't use return false, it does more than you really need. Instead try event.preventDefault()
var a = document.getElementsByTagName("a").forEach(function (e) {
e.onclick = function (a) {
doSomething(a);
return false;
}
}
}
I have 11 checkboxes with individual ids inside a modal popup.I want to have a hyperlink called SelectAll,by clicking on which every checkbox got checked.I want this to be done by javascript/jquery.
Please show me how to call the function
You could attach to the click event of the anchor with an id selectall and then set the checked attribute of all checkboxes inside the modal:
$(function() {
$('a#selectall').click(function() {
$('#somecontainerdiv input:checkbox').attr('checked', 'checked');
return false;
});
});
You can do like this in jquery:
$(function(){
$('#link_id').click(function(){
$('input[type="checkbox"]').attr('checked', 'checked');
return false;
});
});
If you have more than one form, you can specify form id like this:
$(function(){
$('#link_id').click(function(){
$('#form_id input[type="checkbox"]').attr('checked', 'checked');
return false;
});
});
This should work, clicking on the element (typically an input, but if you want to use a link remember to also add 'return false;' to prevent the page reloading/moving) with the id of 'selectAllInputsButton' should apply the 'selected="selected"' attribute to all inputs (refine as necessary) with a class name of 'modalCheckboxes'.
This is un-tested, writing on my phone away from my desk, but I think it's functional, if not pretty.
$(document).ready(
function(){
$('#selectAllInputsButton').click(
function(){
$('input.modalCheckboxes').attr('selected','selected');
}
);
}
);
$(function(){
$('#link_id').click(function(e){
e.preventDefault(); // unbind default click event
$('#modalPopup').find(':checkbox').click(); // trigger click event on each checkbox
});
});
function CheckUncheck(obj) {
var pnlPrivacySettings = document.getElementById('pnlPrivacySettings');
var items = pnlPrivacySettings.getElementsByTagName('input');
var btnObj = document.getElementById('hdnCheckUncheck');
if (btnObj.value == '0') {
for (i = 0; i < items.length; i++) {
if (items[i].type == "checkbox") {
if (!items[i].checked) {
items[i].checked = true;
}
}
}
btnObj.value = "1";
}
else {
for (i = 0; i < items.length; i++) {
if (items[i].type == "checkbox") {
if (items[i].checked) {
items[i].checked = false;
}
}
}
btnObj.value = "0";
}
}