I am attempting to add a No Preference choice to my check box list and what I would like to happen is as follows:
All checkboxes that are selected become unchecked when "No Preference" is selected.
If "No Preference" is selected and another checkbox is selected, then "No Prefernece" becomes unselected.
Here is what I have so far: http://jsfiddle.net/VuS5R/1/
Thank you for your help.
My suggestion would be to put an ID on the ul element. Then you can use getElementByID and getElementsByTagName to identify the checkboxes. Since the "No preferences" checkbox is the first, bind an event on its click to uncheck all the checkboxes if it is checked.
var checkboxes = document.getElementById('list').getElementsByTagName('input');
checkboxes[0].onclick = function(){
if(checkboxes[0].checked){
for(var i = 1; i < checkboxes.length; i++){
checkboxes[i].checked = false;
}
}
}
Here is the jsfiddle.
The elegant solution from jQuery.
The "No preference" has "Nop" class, others "pref":
$(document).ready(function ()
{
$(".Nop").click(function()
{
if ($(this).is(":checked"))
{
$(".pref").attr("checked", false);
}
});
$(".pref").click(function()
{
if ($(this).is(":checked"))
{
$(".Nop").attr("checked", false);
}
});
});
First, you have to give each checkbox a unique ID (currently they all have an ID=1).
Then, you would change your "No Preference" checkbox declaration to this:
input type="checkbox" id="0" name="BT" title="No Preference" value="0" checked="checked" onclick="return NoPreference_ClientClick()"
You will add the following JavaScript to your page:
function NoPreference_ClientClick()
{
if ($get("0").checked)
{
$get("1").checked =
$get("2").checked =
$get("3").checked =
$get("4").checked =
$get("5").checked = false;
}
else
{
$get("1").checked =
$get("2").checked =
$get("3").checked =
$get("4").checked =
$get("5").checked = true;
}
return false;
}
...I hope you get the pattern!
Related
How can I disable a anchor link if one(1) of my six(6) checkbox is not check?
var first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094');
$("a").click(function(e) {
if($("first_option").prop("checked") === false) {
e.preventDefault(); return false;
} else {return true;};
});
Your current logic doesn't work as you're only looking at the checked property of the first element you select, not all of them.
To achieve what you require, you can use the :checked selector to get all the checked elements within the selectors you provide, then check the length property of the result to see if there aren't any. Try this:
var $first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094');
$("#tmp_button-99035").click(function(e) {
if ($first_option.filter(':checked').length === 0) {
e.preventDefault();
alert('Please Choose Collar Colour To Continue');
};
});
first_option.prop("checked") will always check for first element. What you have to do is loop over all elements to check
Like this
$("#tmp_button-99035").click(function(e) {
var isChecked = false;
for (var i = 0; i < first_option.length; i++) {
if (first_option.eq(i).prop("checked")) {
isChecked = true;
break;
}
}
if (!isChecked) {
alert('Please Choose Collar Colour To Continue');
e.preventDefault();
}
return isChecked;
});
Well, the js snippet of yours is only checking the first element. So, you have to track other checkboxes as well for correct result.
var first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094')
$(document).on('click', '#tmp_button-99035', function (e) {
if ($(first_option).filter(":checked").length == 0) {
e.preventDefault();
}
});
I'm trying to filter my page by a checkbox value. That way whenever the value exist in a specific row it will filter that row. The problem with my code is the if checked isn't even firing. I know this because the console log message test is not showing up. I don't get any syntax errors in the console but its not seeing that the check box has been checked. I'm a noob at JavaScript. When the checkbox is checked shouldn't the following code fire?
var $row = $("#data tr"),
$filter_poweron = $("#poweron");
if($filter_poweron.checked) {
console.log('test');
var filterText_poweron = $filter_poweron.val().toLowerCase();
$row.each(function () {
var $row_d = $(this);
$row_d.toggle($row_d.text().toLowerCase().indexOf(filterText_poweron) > -1);
});
}
<br><input type="checkbox" id="poweron" value="1O">PoweredOn <input type="checkbox" id='poweroff' value="0F"> PoweredOff
$filter_poweron is a jQuery object. jQuery objects don't have the checked property.
You can get the checked property of the DOM element using .prop():
var $row = $("#data tr"),
$filter_poweron = $("#poweron");
if ($filter_poweron.prop('checked')) {
console.log('test');
var filterText_poweron = $filter_poweron.val().toLowerCase();
$row.each(function () {
var $row_d = $(this);
$row_d.toggle($row_d.text().toLowerCase().indexOf(filterText_poweron) > -1);
});
}
There are other ways to see if a checkbox element is checked:
$filter_poweron[0].checked;
$filter_poweron.is(':checked');
$filter_poweron.filter(':checked').length;
if($(filter_poweron).is(':checked') {
console.log('test');
var filterText_poweron = $filter_poweron.val().toLowerCase();
$row.each(function () {
var $row_d = $(this);
$row_d.toggle($row_d.text().toLowerCase().indexOf(filterText_poweron) > -1);
});
}
use the jquery change event and check if its checked or not
$(filter_poweron).change(function() {
if(this.checked) {
//Do stuff
}
});
I am working on a JSP page which is having multiple radio buttons with ids ans1, ans2, ans3... etc.. No of radio buttons varies depending upon on the response in previous page. User should select answer for all the radio buttons. i.e. user must select response for all the radio buttons ans1, ans2, ans3 ... etc. I have written a Javascript code for submit button click event as below for validation and to make sure user has responded to all the answers:
function beforeSubmit(){
var obj = document.quizcreen;
var qCount = obj.totQuesHidden.value;
for (var i=1; i<=qCount; i++){
if(document.getElementById("ans"+i).checked){
// checked
}else{
alert("Please select ateleast one option"); // unchecked
return false;
}
}
obj.submit();
return true;
}
For some reason above code is not working. The form should not be submitted if all the radio buttons are not selected. Please help, I know it's very simple and common issue, but I am unable to figure it out. Thanks in advance.
Also following is the form action:
<form name="quizcreen" id="quizcreen" method="post" action="QuizResult.jsp" onsubmit = "return beforeSubmit();">
You have a return true statement in your loop. So when the first radiobutton is checked, it will not check the other ones.
function beforeSubmit(){
var obj = document.quizcreen;
var qCount = obj.totQuesHidden.value;
var allChecked = true;
for (var i=1; i<=qCount; i++){
if(! document.getElementById("ans"+i).checked){
allChecked = false;
}
}
if(! allChecked){
alert("Please select ateleast one option"); // unchecked
return false
}
obj.submit();
return true;
}
Ok I found out a better way to handle my scenario, So I am sharing my code for your info:
function beforeSubmit() {
var obj = document.quizcreen;
var allChecked = true;
$("input:radio").each(function() {
var name = $(this).attr("name");
if ($("input:radio[name=" + name + "]:checked").length == 0) {
allChecked = false;
}
});
if (!allChecked) {
alert("Please answer all the questions."); // unchecked
return false;
}
obj.submit();
return true;
}
your problem is at least one to be checked.
do this stuff
function isRadioChecked() {
return ($('input[type=radio]:checked').size() > 0);
}
I want to use a function to let all checkboxes checked or unchecked,but not use a button click to trigger.How to do it?
<input type="checkbox" name="list" id="checkbox_<%=rs.getString("id")%>" onclick="check_marker(this)" checked="checked" />
You didn't clearify when do you want to that check happen, but there's function for that. It uses for loop for setting checkstate to all checkboxes. You can use it whenever you want in the code.
function checktoggle(state) { // state is true or false(true = checked, false = unchecked)
var boxes = document.getElementsByName('list');
for(var i = 0; i < boxes.length; i++) {
boxes[i].checked = state;
}
}
I need to check, using jQuery, if any checkboxes on the page are checked. The particular checkbox set they are contained in doesn't matter, just any of them.
Any ideas?
Thanks!
var isChecked = $("input[type=checkbox]").is(":checked");
or
var isChecked = $('input:checkbox').is(':checked')
The following function returns true if there are any ticked checkboxes and false otherwise.
function anyCheckbox()
{
var inputElements = document.getElementsByTagName("input");
for (var i = 0; i < inputElements.length; i++)
if (inputElements[i].type == "checkbox")
if (inputElements[i].checked)
return true;
return false;
}
if($('checkbox:checked').length > 0)
//Some checkbox is checked
This should find any checkboxes on the page that are checked
if you only want to look at checkboxes, not radio buttons:
var isChecked = $("input:checkbox").is(":checked");
if you're ok with checkboxes or radio buttons:
var isChecked = $("input").is(":checked");
This works:
var ischecked =$('input[type=checkbox]:checked').length;
so
if (ischecked > 0)
then at least one is checked.
function checkbox(){
var ischecked =$('input[type=checkbox]:checked').length;
if (ischecked <= 0){ // you can change your condition
alert("No Record Selected");
return false;
}else
{
-------//your Action that you want
}
}