I had the following check in my jQuery which I thought was working fine to see if a radio button was checked.
if ($("input[#name='companyType']:checked").attr('id') == "primary") {
...
}
Here's the radiobuttons:
<p>
<label>Company Type:</label>
<label for="primary"><input onclick="javascript: $('#sec').hide('slow');$('#primary_company').find('option:first').attr('selected','selected');" type="radio" name="companyType" id="primary" checked />Primary</label>
<label for="secondary"><input onclick="javascript: $('#sec').show('slow');" type="radio" name="companyType" id="secondary" />Subsidiary</label>
</p>
Then, it suddenly stopped working (or so I thought). I did some debugging and finally realized that it was returning an id of "approved_status". Elsewhere on my form I have a checkbox called "approved_status". I realized that when I originally tested this, I must have testing it on records where approved_status is false. And, now most of my approved_statuses are true/checked.
I changed the code to this:
var id = $("input:radio[#name='companyType']:checked").attr('id');
alert(id);
if (id == "primary") {
And it's now properly returning "primary" or "secondary" as the id.
So, it is working, but it seems that it's not checking the name at all and now just checking radio buttons. I just want to know for future use, what's wrong with the original code b/c I can see possibly having 2 different radio sets on a page and then my new fix probably wouldn't work. Thanks!
Try this:
var id = $("input[name='companyType']:checked").attr('id');
alert(id);
if (id == "primary") {
Related
I am writing some Javascript for an Apache Wicket page and am trying to create a "Select All" checkbox that, when checked, will check all of the other checkboxes and then disable them. Similarly, when dechecked, it will enable and uncheck all of the checkboxes. This checkbox will not be updated by the rest (that is, selecting all of the other checkboxes will not select the Select All box).
I can accomplish what I want using checkbox.checked = selectAll.checked but it doesn't seem to pass in a click event, which I need for some functionality in Wicket. Using checkbox.click() gives me the click events I need but doesn't seem to run after re-enabling the checkboxes.
var selectAll = document.getElementById("all");
function checkbox_changed() {
checkboxes = document.getElementsByName('foo');
for (var i in checkboxes) {
var checkbox = checkboxes[i];
checkbox.disabled = false;
if (checkbox.checked !== selectAll.checked) {
//checkbox.checked = selectAll.checked;
checkbox.click();
}
if (selectAll.checked) {
checkbox.disabled = true;
}
}
}
<form>
<input type="checkbox" id="all" onchange="checkbox_changed()">Select All
<br>
<br>
<input type="checkbox" name="foo">One
<br>
<input type="checkbox" name="foo">Two
<br>
<input type="checkbox" name="foo">Three
<br>
<input type="checkbox" name="foo">Four
<br>
</form>
In case its easier, here is a jsfiddle of the above: https://jsfiddle.net/ytggu5as/
EDIT: I just realized this is only happening in Firefox (I'm using 39.0) and updated the question. It seems to be okay in Chrome and Safari (haven't tested any others). Any idea why this is happening and how to get around it? If not, is there a better alternative to .click() than just using .checked?
The fact that calling click() after reenabling the checkbox doesn't work seems to be a bug in Firefox.
You could work around the bug by setting disabled=false in a first pass, then inside a setTimeout(..., 0) iterate over the checkboxes again and call click() as needed.
I realize similar question had earlier been answered on stack overflow a few times. I checked all the questions and none were similar to mine.
I have a html form that has some radio buttons. In my validation I want to check if atleast one of the radio buttons are checked.
My approach so far:
All radio buttons have same class
All radio buttons have same name
I need to
check if atleast one of the radio button is selecetd
read the value of selected button.
My Javascript so far
function supportFormValidation(){
var isChecked = $('.radioButton').attr('checked')?true:false;
alert(isChecked);
return false;}
This always returns false. But when I try to read vale by individual IDs of each radio button it returns true. Is there any way I can check if a radio button is checked by using the class name.
JSFiddle: http://jsfiddle.net/evj9nch3/
Just use :checked.
var isChecked = !!($('.radioButton:checked').length);
In order to access the checked property you need to use the prop function (after 1.6 anyways). Because the value is either true or false, it's considered a property of the element not an attribute.
Nits answer is a better way of doing it, but look below for the reason why your implementation isn't working.
Take a look at this post for more info
Here is a link to the fiddle
function supportFormValidation() {
var isChecked = $('.radioButton').prop('checked') ? true : false;
alert(isChecked);
return false;
};
supportFormValidation();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' class='radioButton' checked='true' />
You can use this. I checked this is working
$(".ClassName").prop("checked", true)
I'm generating an HTML input with checked="false", however the checkbox is showing up checked.
I did the following in the javascript console and can't quite figure out whats going on. The resulting HTML after using .prop() to set the value to false looks the same except now the checkbox is not checked on the form.
> $(':input[checked]').prop('checked');
< true
> $(':input[checked]')
< [
<input type="checkbox" class="caseVal" checked="false">
]
> $(':input[checked]').prop('checked',false);
< [
<input type="checkbox" class="caseVal" checked="false">
]
I'm under the impression that I should just be setting checked="checked" OR not including the checked property at all if its false is that best practice? Either way I'd like to know what's going on in the above code.
Don't put checked="false"
You only put checked="checked" for valid XHTML, otherwise you'd do
<input type="checkbox" checked>
The browser doesn't care what value is assigned to checked attribute, as soon as it sees checked in the checkbox input tag, it's flagged as checked.
$(document).ready(function () { $(e).prop("checked", false);}
// "e" refers to button element
How to Uncheck in this case, example my code is: (see below)
if(previousHighlightedCheckbox!=null) {
console.log(sent.id, previousHighlightedCheckbox); // current checkbox and previous check box values are different.
document.getElementById(previousHighlightedCheckbox).checked = false; // still this does not uncheck previous one
}
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.
hello i'm using this code for publishing important messages on my applications message wall, i'm using a checkbox for publishing important message on message wall. the problem is that after publishing important message it will again publish the important message without clicking on checkbox, means the checkbox remains true after publishing the important message. please help me for this.
and my code is:
<div class="checkbox" id="checkboxShow" name="userCheckList1" style="display:block;" onclick="importantChkBoxChange(userCheckListShow.checked);">
<input type="checkbox" name="userCheckList1" id="userCheckListShow" unchecked="unchecked"
onchange="importantChkBoxChange(userCheckList.checked);"/>
</div>
<div class="checkbox" id="checkboxHide" name="userCheckList1" style="display:none;" onclick="importantChkBoxChange(userCheckListHide.checked);">
<input type="checkbox" name="userCheckList1" id="userCheckListHide" unchecked="unchecked"
onchange="importantChkBoxChange(userCheckListHide.checked);"/>
</div>
<span class="fl" style="margin:3px 0px 0 0;" ><#spring.message "label.employee.home.Important"/></span>
and the script used for this is:
function importantChkBoxChange(chkBoxStatus){
if(chkBoxStatus == true){
document.forms['messageWallForm'].elements['important'].value="checked";
}else if(chkBoxStatus == false){
document.forms['messageWallForm'].elements['important'].value="unchecked";
}
}
Ok, first unchecked is not a property of input. You can have <input type="checkbox" checked="checked" /> if you want to be XML conscious, or you can simply omit the ="checked": <input type="checkbox" checked />, but unchecked is default, so there is no way to us an unchecked attribute.
Second, I noticed that there are variables userCheckListHide and userCheckListShow, but I don't see a declaration of those variables. Are you sure that they exist? Was userCheckListShow = document.getElementById("userCheckListShow") called after the input was created? Otherwise you're dealing with null values.
Third, with checkboxes and radio buttons, you're not interested in the value, so much as you are interested in whether they are checked. You could re-write your function:
// changed the variable name so that it wouldn't scroll. Your var. name was fine.
function importantChkBoxChange(stat){
// since your test is if(checked) set it to checked otherwise set it to
// unchecked, you can simply set the checked property directly.
document.forms['messageWallForm'].elements['important'].checked = stat;
}
As a side note, if you want this to reflect whether either of the cb's in your question are selected, then both onchange handlers should be:
importantChkBoxChange(userCheckList.checked || userCheckListHide.checked);
I dont know where to begin , but here are a few pointers .
A checkbox is not checked/unchecked by changing it's value . It has a checked attribute .Something like document.getElementById('checkBoxId').checked=true
Use DOM ids to refer to your DOM elements .Ideally .
if(chkBoxStatus == true) is redundant
there's no unchecked attribute for checkboxes
if you want to transmit the checked status of a checkbox to a js function on an event (like onchange) , you can do like onchange="foo(this.checked)"