Check/uncheck all checkboxes on without looping and without a framework - javascript

Is it possible to check or uncheck a set of checkboxes on a page a) without looping, and b) without using a Javascript framework such a jQuery?
This question is related but is about (un)checking all the checkboxes on a page with jQuery.
I expect the answer to my question will probably be "no", but if there's some weird, hacky way of doing it (not weird and not hacky is good too!) then I would like to know. Call it curiosity if you will.
Edit: I suppose what I'm really asking is for a way to do it in O(1) (constant time) rather than O(n) (linear time with respect to the number of checkboxes)

If the buttons are in a form, you can use a reset button if the default state is unchecked and you don't mind resetting all the other controls in the form. Otherwise, you have to use a loop regardless of whether you use POJS or a "framework".
Look ma, no script!
<form action="#">
<div>
<input type="checkbox" name="cb0">
<input type="checkbox" name="cb1">
<input type="checkbox" name="cb2">
<input type="checkbox" name="cb3">
<br>
<input type="reset" value="Uncheck all">
</div>
</form>

One way you can go about checking or unchecking a set of checkboxes on a page is to reference each one individually.
This meets both criteria "a" (no looping) and criteria b (no framework)

You could do it with map(), which may or may not be a loop, depending on how strict of a definition you use for "loop" :) But in all practical terms, it's just another way of casting a loop. I'd say the answer to your question is "no."
EDIT:
var checkboxes = getElement...
checkboxes.map(function(c) {
c.checked = true;
});

You may modify/override the full HTML code:
<div id="checkBoxes">
<input name="foo" type="checkbox" value="1" />
<input name="bar" type="checkbox" value="1" />
<input name="baz" type="checkbox" value="1" />
</div>
<script type="text/javascript">
function checkAll(){
document.getElementById("checkBoxes").innerHTML =
'<input name="foo" type="checkbox" value="1" checked="checked" />'
+'<input name="bar" type="checkbox" value="1" checked="checked" />'
+'<input name="baz" type="checkbox" value="1" checked="checked" />';
}
function uncheckAll(){
document.getElementById("checkBoxes").innerHTML =
'<input name="foo" type="checkbox" value="1" />'
+'<input name="bar" type="checkbox" value="1" />'
+'<input name="baz" type="checkbox" value="1" />';
}
</script>
no Loop, no Framework, just a little bit unesthetic..

Related

Require answers to multiple radio buttons to go to next page HTML

I am setting up a multipage survey/study that has 2 multiple choice radio button questions per page (with the exception of the first page, which requires no answer). I have a next function that checks to make sure an answer has been given. It works, but when passed two values so that it will check two questions, it only checks one of them. I used console.log to display the name passing through the function, and only one name gets passed. I can go to the next page by answering only one of the questions, even if it's not the one passing through the function according to the name in the console log. How can I get it to check all of the questions that I specify in onclick?
Here is the code for the Continue button with the next() function for onclick. When I pass both names, it will only check 1 of the 2.
<input type="button" value="Continue" onclick="next('Q1Answer','Q1Rating');"/>
These are the radio buttons:
Question 1
<input name="Q1Answer" type="radio" value="Right" /> Right 
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong
Question 2
Less confident
<input class="rating" name="Qrating" type="radio" id="v1" value="1" />
<input class="rating" name="Qrating" type="radio" id="v2" value="2" />
<input class="rating" name="Qrating" type="radio" id="v3" value="3" />
<input class="rating" name="Qrating" type="radio" id="v4" value="4" />
<input class="rating" name="Qrating" type="radio" id="v5" value="5" />
More confident
This is the current version of my next function. I added a for loop to try to get it to iterate through all of the items passed to it, but that isn't solving the issue (it worked the same way without the loop). This code is in a javascript file that I call in the HTML code.
function next(name) {
for (i in name) {
if (name.startsWith('Q')) {
if (!document.querySelectorAll('input[name]:checked').length) {
alert("Please answer the question.");
return;
}
}
}
current++;
swap(effectivePage(current - 1), effectivePage(current));
}
(swap and effectivePage are other functions for progressing to the next page, I can add those if needed to test)
I've used name as the identifier, but could easily replace with ID if that would somehow make this easier. I used the startsWith if condition so that only actual questions would get checked.
I have basic HTML knowledge and don't know Javascript at all beyond what I've taught myself to try to figure this out, so I'm hoping the solution is a simple one.
So I managed to find 2 problems which were keeping your code from performing the way you wanted. When you created your next call in the HTML, you tried to pass in multiple name strings, but your next function only takes in one parameter. This means that your calls were only ever getting the first string to check against which in this case was Q1Answer. If you change the value being passed in to an array of strings, then you can perform the checking against all the names you need. Also, be sure to pass the exact name of the inputs you want to check against in that next call. If those names are incorrect your code will make it so the user can never reach the next page as it will think that that input was never selected (because it won't find that input at all on the page).
Second, when you were performing the checking by using the query selector, you weren't checking against any specific names so it was always finding the selected first value even if it should have been checking for the second input tag. I have modified that check to now specifically look for the name passed in so it will only match against the input in question (ie, the first pass will check for Q1Answer and the second pass will check for Qrating).
function next(name) {
for (i in name) {
if (name[i].startsWith('Q')) {
if (!document.querySelectorAll('input[name=' + name[i] + ']:checked').length) {
alert("Please answer the question.");
return;
}
}
}
current++;
swap(effectivePage(current - 1), effectivePage(current));
}
<input type="button" value="Continue" onclick="next(['Q1Answer','Qrating']);" />
<input name="Q1Answer" type="radio" value="Right" /> Right 
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong
<br/> Less confident
<input class="rating" name="Qrating" type="radio" id="v1" value="1" />
<input class="rating" name="Qrating" type="radio" id="v2" value="2" />
<input class="rating" name="Qrating" type="radio" id="v3" value="3" />
<input class="rating" name="Qrating" type="radio" id="v4" value="4" />
<input class="rating" name="Qrating" type="radio" id="v5" value="5" /> More confident

Add HTML Attribute without a value using Jquery

I want to add an attribute to a HTML element without a value using JQuery
<input id="r1" type="radio name="r1" value="1">
Add required
<input id="r1" type="radio name="r1" value="1" required>
How can this be done without the =""after the attribute?
The standard practice would be to set the property to true
$("#r1").prop("required", true);
This actually results in markup that exactly reads
<input id="r1" required>
JSFiddle demo: http://jsfiddle.net/8SrED/

Radio button selection dynamically change other radio button value

So I've tried looking, and I haven't found anything so hopefully this isn't a repeat question. I have several sets of radio buttons, and I need to have the values associated with the latter radio buttons change dynamically based on the users selection within the first set of radio buttons.
<input type="radio" name="length" id="6feet" value=" " > 6'0"
<input type="radio" name="length" id="6.5feet" value=" " > 6'6"
<input type="radio" name="length" id="7feet" value=" " > 7'0"
<input type="radio" name="weight" ID="weight3" value="5" /> 3
<input type="radio" name="weight" ID="weight4" value="10" /> 4
<input type="radio" name="weight" ID="weight5" value="15" /> 5
<input type="radio" name="pieces" ID="PieceA" value="10"> 2
<input type="radio" name="pieces" ID="PieceB" value="20"> 3
So what I'm trying to figure out is if there is a way to use onClick or something similar to set it so that when the user selects one of the three "length" radio buttons, they will each assign different values to both the weight and pieces radio buttons as well. Sorry if the question is unclear at all.
I didnt understand totally your question.. is this what you need?
$(document).ready(function(){
$('input[name=length]').click(function () {
$('input[name=weight]').val(newValue);
$('input[name=pieces]').val(newValue);
});
});
Do you need something like this and reassign a real "value" for radiobuttons?
A pure javascript solution would look similar to this:
document.getElementById("6feet").onclick = (function() {
document.getElementById("weight3").click();
});
You attach the onclick event to an element (in this case the element with id of 6feet) and once that is clicked it calls the defined function.
Read more about .click()
EXAMPLE
There are also simpler solutions using jQuery, but I wasn't sure if you were able to incorporate it into your code.

javascript/jquery- how to determine if a list/checkbox allows multiple values to be selected or not

I am trying to parse through a typical form using jquery. I want to obtain all details about the various fields in the form- viz field name, field type (eg radio/checkbox/list)...
How do I determine if a field allows multiple values to be selected? (eg in check box or list box)?
If this cannot be done using jquery, then can it be done using pure javascript? I already have with me a ref to the element for which this (whether multiple values are allowed or not) has to be determined...
Surround your control with some <div> as:
<div id="testCheck">
<input type="checkbox" checked="checked" value="1" />
<input type="checkbox" checked="checked" value="2" />
<input type="checkbox" checked="checked" value="3" />
<input type="checkbox" checked="checked" value="4" />
<input type="checkbox" checked="checked" value="5" />
<input type="checkbox" checked="checked" value="6" />
<input type="checkbox" checked="checked" value="7" />
<input type="checkbox" checked="checked" value="8" />
</div>
and check the selected or unselected elements using follwwing jquery code snippet. .size() will return the no of checked item and you can get the value of selected items by .val().
//Write your code when Document is loaded or some element click
$(document).ready(function() {
$("#testChk").click(function() {
alert($("#testCheck :checked").size());
//function to print the value of each checked checkboxes
$("#testCheck :checked").each(function() {
alert("value = " + $(this).val());
});
for more help follow these links:
How can I know which radio button is selected via jQuery?
have a look on jquery selector. you should watch bottom itms :password, :reset etc that you need to use.
http://api.jquery.com/category/selectors/
http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html
Handling Checkboxes, Radio Buttons and Select Options in jQuery
Hope this help you little bit...

Unable to get a checkbox to be checked (not a simple question!)

Don't dismiss this as a newbie question! It's not, I'm not, I've tried everything, and its a complex/convoluted environment that my code is in.
Okay - here goes. I'm adapting someone else's html/js/css code and trying to get it to work on my server (I've taken permission - please, no comments on that). The main html generates a overlaid form which has a checkbox which is unchecked that I need to mark as checked before presenting to the user.
The checkbox code is just:
<input type="checkbox" id="type" />
<label for="type" id="disable">Disable check</label>
I've tried changing the above to ALL of the following (AND doing Ctrl+F5 when trying it out on the browser):
<input type="checkbox" id="type" CHECKED/>
<input type="checkbox" id="type" checked>
<input type="checkbox" id="type" checked="checked"/>
<input type="checkbox" id="type" checked="checked" value="1"/>
<input type="checkbox" id="type" value="true" checked>
<input type="checkbox" id="type" name="tempname" checked="checked"/>
<input type="checkbox" id="type" checked=true/>
At the end of the page: <script type="text/javascript">document.getElementById("type").checked=true;</script>
The problem COULD be elsewhere - something somewhere COULD be setting it to a default value of unchecked, but (a) that's a bit unlikely, and (b) I did look at the accompanying js code but no luck on a preliminary search.
Thoughts? 'cause I'm all out... :(
It's a fairly simple question, if only because checkboxes are fairly simple things :)
If
<input type="checkbox" id="type" name="name" checked="checked"/>
doesn't work then I would strongly suggest taking a bigger dig through the javascript being loaded on the page.
Have you looked into the JavaScript to see if there is code that is marking the checkbox unchecked onclick?

Categories

Resources