get the text next to checkboxes in javascript/JQuery - javascript

Is there any way that I can get "Enable Recruiters to directly contact me" in Javascript or JQuery when the checkbox checked?
I know I can get the value easily, but how about the text beside that which can be in a lable?
<input type="checkbox" name="rec" id="rec" value="ON"><label for='rec'>Enable Recruiters to directly contact me</label>
Please let me know if you need more clarification!

You can bind the change event and use the event source object to call next on it to get the label next to checkbox.
Live Demo
$('#rec').change(function(){
if(this.checked)
alert($(this).next().text())
})

Related

Initially set all checkboxes to checked

I have jquery code that has the ability to set all checkboxes to 'checked' state on the click of a 'check all' checkbox. However, I would like to initially, start a html page by already having all checkboxes checked without having to click on that 'check all' checkbox. Please bear in mind, though, that I would like to keep the 'check all' checkbox since it has the ability to uncheck all checkboxes as well.
Here's my jquery code :
$('.chk_boxes').click(function(){
var chk = $(this).attr('checked')?true:false;
$('.chk_boxes1').attr('checked',chk);
});
If you want to have all your checkboxes checked the moment the page is loaded without the need to click anything, use:
$(document).ready(function(){
$("input:checkbox").prop("checked", "true");
});
Or just generate your HTML input tag like so:
<input type="checkbox" checked="checked" />
Hope this helps!
You could place your checkAll function outside of your click function, call it once the page load and when you click on the check all button
$(document).ready(function(){
checkAll(true);
$('.chk_boxes').click(function(){
var chk = $(this).attr('checked')?true:false;
checkAll(chk)
});
function checkAll(isCheck){
$('.chk_boxes1').attr('checked',isCheck);
}
})
I also like #Univ approach.
Change your original function to:
$('.chk_boxes').click(chkAll());
Create a new function:
function chkAll(){
var chk = $(this).attr('checked')?true:false;
$('.chk_boxes1').attr('checked',chk);
}
Call the new function when document are ready:
$(document).ready(function(){
chkAll();
})
I would just use html attributes
<input name="name" id="id" type="checkbox" checked="checked">
I wouldn't recommend using javascript to set these initial values because it will unnecessarily waste resources in the client machines.

How can I have a checkbox as selected in Javascript?

I have some items to be selected,they are checkboxes with their certain titles in a table. I want to onclick on an item(I mean each "td") then the function do its job but besides I want the checkbox of that selected "td" t be checked. How can I do it with javascript?
note:I am learning javascript so please don't answer with a jquery solution.
the code below is an example of each items
<td id="1" onclick="chb('1')" ><input type="checkbox" />title</td>
This is pure JS to select a check box. You need to give your check box an Id (for example 'check1') and run the below code inside the function you call in the click event.
document.getElementById("check1").checked = true;
Actually I didn't understand what you told. But i think you want the checkbox to be checked already. Then use checked in <input> Like this : <input type="checkbox" checked>or You can use document.getElementById("check1").checked = true;

Check a radio button with javascript

For some reason, I can't seem to figure this out.
I have some radio buttons in my html which toggles categories:
<input type="radio" name="main-categories" id="_1234" value="1234" /> // All
<input type="radio" name="main-categories" id="_2345" value="2345" /> // Certain category
<input type="radio" name="main-categories" id="_3456" value="3456" /> // Certain category
<input type="radio" name="main-categories" id="_4567" value="4567" /> // Certain category
The user can select whichever he/she wants, but when an certain event triggers, I want to set 1234 to be set checked radio button, because this is the default checked radio button.
I have tried versions of this (with and without jQuery):
document.getElementById('#_1234').checked = true;
But it doesn't seem to update. I need it to visibly update so the user can see it.
Can anybody help?
EDIT: I'm just tired and overlooked the #, thanks for pointing it out, that and $.prop().
Do not mix CSS/JQuery syntax (# for identifier) with native JS.
Native JS solution:
document.getElementById("_1234").checked = true;
JQuery solution:
$("#_1234").prop("checked", true);
If you want to set the "1234" button, you need to use its "id":
document.getElementById("_1234").checked = true;
When you're using the browser API ("getElementById"), you don't use selector syntax; you just pass the actual "id" value you're looking for. You use selector syntax with jQuery or .querySelector() and .querySelectorAll().
Today, in the year 2016, it is safe to use document.querySelector without knowing the ID (especially if you have more than 2 radio buttons):
document.querySelector("input[name=main-categories]:checked").value
Easiest way would probably be with jQuery, as follows:
$(document).ready(function(){
$("#_1234").attr("checked","checked");
})
This adds a new attribute "checked" (which in HTML does not need a value).
Just remember to include the jQuery library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
By using document.getElementById() function you don't have to pass # before element's id.
Code:
document.getElementById('_1234').checked = true;
Demo:
JSFiddle
I was able to select (check) a radio input button by using this Javascript code in Firefox 72, within a Web Extension option page to LOAD the value:
var reloadItem = browser.storage.sync.get('reload_mode');
reloadItem.then((response) => {
if (response["reload_mode"] == "Periodic") {
document.querySelector('input[name=reload_mode][value="Periodic"]').click();
} else if (response["reload_mode"] == "Page Bottom") {
document.querySelector('input[name=reload_mode][value="Page Bottom"]').click();
} else {
document.querySelector('input[name=reload_mode][value="Both"]').click();
}
});
Where the associated code to SAVE the value was:
reload_mode: document.querySelector('input[name=reload_mode]:checked').value
Given HTML like the following:
<input type="radio" id="periodic" name="reload_mode" value="Periodic">
<label for="periodic">Periodic</label><br>
<input type="radio" id="bottom" name="reload_mode" value="Page Bottom">
<label for="bottom">Page Bottom</label><br>
<input type="radio" id="both" name="reload_mode" value="Both">
<label for="both">Both</label></br></br>
It seems the item.checked property of a HTML radio button cannot be changed with JavaScript in Internet Explorer, or in some older browsers.
I also tried setting the "checked" attribute, using:
item.setAttribute("checked", ""); I know the property can be set by default,
but I need just to change the checked attribute at runtime.
As a workarround, I found another method, which could be working. I had called the item.click(); method of a radio button. And the control has been selected. But the control must be already added to the HTML document, in order to receive the click event.

How to check "checkbox" dynamically - jQuery Mobile

With HTML a checkbox is created like this:
<form>
<input type="checkbox" id="category1">Category1<br>
</form>
With javascript we can check the checkbox like this:
$("#category1")[0].checked = true
Now I am trying to create the same page with jquery-mobile. The checkbox looks like this:
<form>
<label>
<input name="checkbox-0 " type="checkbox">Check me
</label>
</form>
Why is there is no id here? Is the name the id? Should I delete the attribute name and create one with the name id?
How can I check this checkbox here with Javascript/jQuery?
I tried the code above, but it doesn't seem to work for this checkbox.
You need to refresh it after changing its' .prop, using .checkboxradio('refresh'). This is the correct way to check checkbox/radio in jQuery Mobile.
Demo
$('.selector').prop('checked', true).checkboxradio('refresh');
Reference: jQuery Mobile API
You can do:
$('input[name="checkbox-0"]').prop("checked", true).checkboxradio('refresh'); //sets the checkbox
var isChecked = $('input[name="checkbox-0"]').prop("checked"); //gets the status
Straight from the jQ Mobile docs:
$("input[type='checkbox']").attr("checked",true);
With the solution from #Omar I get the error:
Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'
I actually had a flipswitch checkbox:
<div class="some-checkbox-area">
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>
and found the solution was:
$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" )
Notes
I don't usually specify ids for page content as jQuery Mobile loads multiple div.ui-page content into a single HTML page for performance. I therefore never really understood how I could use id if it might then occur more than once in the HTML body (maybe someone can clarify this).
If I use prop rather than attr the switch goes into an infinite flipping loop! I didn't investigate further...

Radio button onclick insert value to href

I’m trying to insert the url from an onlick event in the the radio buttonsto the href link but it not working. Here’s I have so far.
<input type="radio" name="orderID" value="1" onclick="javascript:document.getElementById('editBTN').href='forms/editForm.cfm?orderID ='&this.value">
<input type="radio" name=" orderID " value="2" onclick="javascript:document.getElementById('editBTN').href='forms/editForm.cfm?orderID ='&this.value">
Etc…
The link below href should change depending on which radio button is clicked.
Edit Order
The above script returns the current url with “localhost/myApp/0” at the end. If I remove this ('forms/editForm.cfm?orderID='&) from the radio button it correctly return the orderId.
I would like this result localhost/myApp/forms/editForm.cfm?orderID=1. Any suggestion would be greatly appreciated.
JavaScript uses + to concatenate strings, not &:
onclick="document.getElementById('editBTN').href=
'forms/editForm.cfm?orderID ='+this.value"
(line break added for readability)
should work.
You can lose the javascript: prefix, by the way.
You listed jquery as one of your question tags. I'd simply place the following script onto my page and attach the click event on the radio's to push their value into the appropriate button attribute.
$('input[name=orderID]').click(function(e) {
$('#editBTN').attr('href', 'forms/editForm.cfm?orderID ='+$(this).val());
});
I think the & before this.value should be a +

Categories