How to check/uncheck checkboxes by clicking a hyperlink? - javascript

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";
}
}

Related

Convert jquery to javascript to highlight parent div of radio button/checkbox

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");
}
}
}

jQuery on click toggle event

I've made a function which selects an item when you click on it. And made it so when I've selected more than 10, it stops adding to selectedItems.
But when 10 items is selected, I can still toggle the class d-items-selected by clicking. How do I disable that? I've tried to use stop() but that canceled the hole thing, so I couldn't 'de-select' the items again.
$(document).ready(function(){
$('.d-items').on('click', function(e){
e.preventDefault();
$(this).toggleClass('d-items-selected');
var selectedItems = $('.d-items-selected').length;
if(selectedItems > 10) {
$('.d-items').finish();
} else {
$('#ItemsSelected').html(selectedItems);
}
});
});
You can disable controls which are not selected. Something like this.
$(document).ready(function(){
$('.d-items').on('click', function(e){
e.preventDefault();
$(this).toggleClass('d-items-selected');
var selectedItems = $('.d-items-selected').length;
if(selectedItems > 10) {
//do not allow to select
$(this).removeClass('d-items-selected');
} else {
$('#ItemsSelected').html(selectedItems);
}
});
});
Would unbinding the click event work for you?
e.g.
if(selectedItems > 10) {
$('.d-items').unbind("click");
}
Otherwise you can rebind it to a different function after selectedItems > 10, or anything really.
edit: It would help if you clarified what exactly you want to happen on click after selectedItems > 10
Maybe try
e.stopPropagation() or
e.stopImmediatePropagation()
I tried to figured out a solution:
$(function () {
$('.d-items').on('click', function(e) {
e.preventDefault();
var selectedItems = $('.d-items-selected').length;
//if selected items are less then 10
// or the current item is already selected you can deselect
if (selectedItems<10 || (selectedItems>=10 && $(this).is('.d-items-selected'))) {
$(this).toggleClass('d-items-selected');
}
if (selectedItems > 10) {
$('.d-items').finish();
} else {
$('#ItemsSelected').html(selectedItems);
}
});
});
$(document).ready(function(){
var i=0;
$('.d-items').on('click', function(e){
e.preventDefault();
if($(this).hasClass('d-items-selected')) {
$(this).removeClass('d-items-selected');
i--;
console.log("deleted"+i);
}
else {
if(i<10) {
$(this).addClass('d-items-selected');
i++;
console.log("added"+i);
}
}
})
});

How do I use the JQuery toggle ability to toggle the visibility of a group of rects?

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");
}

Accessing elements of a table row on the basis of checked radio button

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);
}
})
});

Javascript check if radio button was checked?

I have found scripts that do it, but they only work with one radio button name, i have 5 different radio button sets. How can i check if its selected right now i tried on form submit
if(document.getElementById('radiogroup1').value=="") {
alert("Please select option one");
document.getElementById('radiogroup1').focus();
return false;
}
does not work.
If you have your heart set on using standard JavaScript then:
Function definition
var isSelected = function() {
var radioObj = document.formName.radioGroupName;
for(var i=0; i<radioObj.length; i++) {
if( radioObj[i].checked ) {
return true;
}
}
return false;
};
Usage
if( !isSelected() ) {
alert('Please select an option from group 1 .');
}
I'd suggest using jQuery. It has a lot of selector options which when used together simplify the much of the code to a single line.
Alternate Solution
if( $('input[type=radio][name=radioGroupName]:selected').length == 0 ) {
alert('Please select an option from group 1 .');
}
var checked = false, radios = document.getElementsById('radiogroup1');
for (var i = 0, radio; radio = radios[i]; i++) {
if (radio.checked) {
checked = true;
break;
}
}
if (!checked) {
alert("Please select option one");
radios.focus();
return false;
}
return true;
A very simple function is:
<script type="text/javascript">
function checkRadios(form) {
var btns = form.r0;
for (var i=0; el=btns[i]; i++) {
if (el.checked) return true;
}
alert('Please select a radio button');
return false;
}
</script>
<form id="f0" onsubmit="return checkRadios(this);">
one<input type="radio" name="r0"><br>
two<input type="radio" name="r0"><br>
three<input type="radio" name="r0"><br>
<input type="submit">
</form>
However, you sould always have one radio button selected by default (i.e. with the select attribute), some user agents may automatically select the first button. Then you just need to check if the default (usually the first one) is checked or not.
Why don't just use a oneliner?
I wrote this code, it will submit the form if at least one radio is checked:
(function(el){for(var i=el.length;i--;) if (el[i].checked) return el[i].form.submit()||1})(document.form_name.radio_name)||alert('please select item')
Otherwise it will make an alert. Or you may also modify it to use with form's onsubmit:
return (function(el){for(var i=el.length;i--;) if (el[i].checked) return 1})(document.form_name.radio_name)||alert('please select item')
Just replace form_name and radio_name accordingly.
See how it works: http://jsfiddle.net/QXeDv/5/
Here's a good tutorial -> http://www.somacon.com/p143.php
// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
function getCheckedValue(radioObj) {
if(!radioObj) return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked) return radioObj.value;
else return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) return radioObj[i].value;
}
return "";
}
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj) return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) radioObj[i].checked = true;
}
}
Are you ok with jquery? If so:
$(document).ready(function(){
if($('input[type=radio]:checked').length == 0)
{
alert("Please select option one");
document.getElementById('radiogroup1').focus();
return false;
}
}

Categories