Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Group checkboxes in JSFiddle : Part 1
After solving Part 1 for Global Checkbox for All Check/Uncheck. I have couple other issues to solve.
If I unchecked any of the items from list. Automatically Global (Check all) should be unchecked.
If I checked all of items individually. Automatically Global (Check all) should be checked. like this.
Code
<fieldset>
<!-- these will be affected by check all -->
<div><input type="checkbox" ID="checkall1"> Check all</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
<!-- these won't be affected by check all; different field set -->
<div><input type="checkbox" ID="checkall2"> Check all</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
JS
$('[id^=checkall]').click(function(){
$(this).closest('fieldset').find('input').not(this).prop('checked',this.checked);
});
JSFiddle
Register a callback which will check whether all the checkboxes in the current group is checked or not
$('input[id^=checkall]').click(function(){
$(this).closest('fieldset').find('input').not(this).prop('checked',this.checked);
});
$(':checkbox').not('[id^=checkall]').click(function(){
var all = $(this).closest('fieldset').find('[id^=checkall]');
var chks = $(this).closest('fieldset').find('input').not(all);
all.prop('checked', chks.length == chks.filter(':checked').length);
})
Demo: Fiddle
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am using materialize framework and i have to populate this form using java script. I am not sure how to access them in my js file
<div class="row col s10 offset-s1" id="questionArea" style="display:none">
<blockquote class="flow-text"> Select the capital of the country shown below.</blockquote>
<div class="input-field col s6">
Question <span id="quesTextSpan"></span><p>
<input name="qOptions" type="radio" id="optionId0" class="with-gap qOptionClass" />
<label for="optionId0"></label>
</p>
<p>
<input name="qOptions" type="radio" id="optionId1" class="with-gap qOptionClass" />
<label for="optionId1"></label>
</p>
<p>
<input name="qOptions" type="radio" id="optionId2" class="with-gap qOptionClass" />
<label for="optionId2">d</label>
</p>
<p>
<input name="qOptions" type="radio" id="optionId3" class="with-gap qOptionClass" />
<label for="optionId3"></label>
</p>
</div>
</div>
You can access the values of the radio buttons like this:
var radioVal = document.getElementById('optionId0').checked;
You can then perform logic on them by using conditionals and functions.
To gather them all quickly I would recommend doing this.
var radios = document.querySelectorAll('input[type="radio"]');
This will give you an array with each of the elements.
You may then go through and change the value to true or false depending on how you want to populate them.
Example)
radios[0].checked = true // Sets the first radio button to be on.
Edit)
To display the div use:
document.getElementById('questionArea').style.display = '';
To hide the div use:
document.getElementById('questionArea').style.display = 'hidden';
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Im trying to make a simple quiz like so:
I would like to use a custom alert box, not the usual JavaScript one. So just a div that appears with my message inside.
Apologies if I do not have more to work with than the screenshots - I've looked at many other questions and bits of scripts, but I'm really interested in something simple that can push me in the right direction.
Thanks!
You could try with JQuery. Then you could show or hide the divs simply by using $("#mydiv").show() or $("#mydiv").hide().
.correct{max-width:100px;opacity:0}
input:checked.right ~div.correct{position:relative;background-color:yellow;top:-20px;left:70px;opacity:1;}
<div >
Which country is commonly called the U.S.A ?<br>
England<input type="radio" name="one" value="UK" /><br>
America<input type="radio" name="one" value="US" class="right"/><br>
<div class="correct">Correct</div></div>
<div >
Which country is commonly called the U.S.A ?<br>
England<input type="radio" name="two" value="UK" /><br>
America<input type="radio" name="two" value="US" class="right"/><br>
<div class="correct">Correct</div></div>
<div >
Which country is commonly called the U.S.A ?<br>
England<input type="radio" name="three" value="UK" /><br>
America<input type="radio" name="three" value="US" class="right"/><br>
<div class="correct">Correct</div></div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I am looking for a javascript that can check multiple checkboxes within a set group.
I am searching for something that would achieve this:
If checkbox group1 is checked checkbox 1,2,3,4,5 are checked.
I did not find a similar solution in Javascript please help me out!
here is a solution :
HTML :*
<input type="checkbox" onchange="check('1');" name="GRP" id="GRP1" />G1
<br>
<input type="checkbox" name="GRP-1" />1-G1
<input type="checkbox" name="GRP-1" />2-G1
<input type="checkbox" name="GRP-1" />3-G1
<input type="checkbox" name="GRP-1" />4-G1
<hr>
<input type="checkbox" onchange="check('2');" name="GRP" id="GRP2" />G2
<br>
<input type="checkbox" name="GRP-2" />1-G2
<input type="checkbox" name="GRP-2" />2-G2
<input type="checkbox" name="GRP-2" />3-G2
<input type="checkbox" name="GRP-2" />4-G2
<hr>
<input type="checkbox" onchange="check('3');" name="GRP" id="GRP3" />G3
<br>
<input type="checkbox" name="GRP-3" />1-G3
<input type="checkbox" name="GRP-3" />2-G3
<input type="checkbox" name="GRP-3" />3-G3
<input type="checkbox" name="GRP-3" />4-G3
JavaScript :
function check(grp_num)
{
var checks=document.getElementsByName('GRP-'+grp_num);
for(i=0;i<checks.length;i++){
checks[i].checked=document.getElementById("GRP"+grp_num).checked;
}
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
I am working on an input box for a promo code. We have several promo codes. However, on one promo code, if the user types in "springchicken", then I need it to open, or toggle an additional radio input for a selection. Is that possible? I am thinking I could use onType, but I don't really know how to write that. See example below. I need it to so something like that but the words that are typed must match "SpringChicken". How can I write that?
<input type="text" name="promo" id="promo" value="" size="22" placeholder="Enter Promo Code" ontype="document.getElementsByClassName('promoradio')[0].style.display='block';" />
<!--Need the following DIV to appear once "SpringChicken" is entered on the fly-->
<div class="promoradio">
<input type="radio" name="promopkg" value="1" /><label>Promo Package #1</label>
<input type="radio" name="promopkg" value="2" /><label>Promo Package #2</label>
</div>
Try this jquery solution: (Edited so it won't be case sensitive)
<script type="text/javascript">
$(document).ready(function () {
$("#promo").keyup(function() {
var value = $(this).val().toLowerCase();
if (value == "springchicken") {
$(".promoradio").show();
} else {
$(".promoradio").hide();
}
});
});
</script>
There are a couple things wrong here.
First, there is no ontype event for javascript. You'll want onkeypress (for when they key goes down) or onkeyup for when the key goes up.
Second, inline javascript is ugly and bad practice. Use something like this:
var x = document.getElementById("input element");
x.onkeyup = function() {
var word = x.innerHTML;
if (word.toUpperCase() === "SPRINGCHICKEN") { //if you're not worried about case sensitivity or unicode
document.getElementsByClassName('promoradio')[0].style.display='block';
}
}
Assuming the class promoradio has display:hidden here initially.
Try this,
<input type="text" name="promo" id="promo" value="" size="22" placeholder="Enter Promo Code" />
<!--Need the following DIV to appear once "SpringChicken" is entered on the fly-->
<div class="promoradio">
<input type="radio" name="promopkg" value="1" /><label>Promo Package #1</label>
<input type="radio" name="promopkg" value="2" /><label>Promo Package #2</label>
</div>
<script>
var textToMatch = "springchicken";
function matchWord(e){
if(document.getElementById('promo').value.trim().toLowerCase() == textToMatch){
document.getElementsByClassName('promoradio')[0].style.display='block';
}else{
document.getElementsByClassName('promoradio')[0].style.display='none';
}
}
document.getElementById('promo').onkeyup = matchWord;
</script>
css:
.promoradio{
display:none;
}
Check fiddle
Hope it helps.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am trying to do group checkboxes by selecting selectAll. Please check JSFiddle for code sample
JSFiddle
<fieldset>
<!-- these will be affected by check all -->
<div><input type="checkbox" ID="checkall1" onclick="CheckAllClick('checkall1');"> Check all</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
<!-- these won't be affected by check all; different field set -->
<div><input type="checkbox" ID="checkall2" onclick="CheckAllClick('checkall2');"> Check all</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
function CheckAllClick(id){
alert(id);
$(id).closest('fieldset').find(':checkbox').prop('checked', this.checked);
}
Part 2: Continue
You have some issues in your function: Try this way:
Js
function CheckAllClick(elem) {
$(elem).closest('fieldset').find(':checkbox').prop('checked', elem.checked);
}
Markup
<input type="checkbox" ID="checkall1" onclick="CheckAllClick(this);">Check all</div>
Fiddle
Pass the element in the onclick function as this and access it in your code.
If you can go with jquery approach then:
Add a class to your checkall check boxes
<input type="checkbox" class="checkAll" ID="checkall1" >Check all
With the same code, if you want to make the label click to check the checkbox then just wrap them in label tag, same thing you can do with all the checkboxes by wrapping them in label which generally is a standard way:
<label><input type="checkbox" class="checkAll" ID="checkall1" >Check all<label>
Bind an event handler to a class
$('.checkAll').on('change', function(){
$(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
})
Fiddle
function CheckAllClick(id){
alert(id);
$(id).closest('fieldset').find(':checkbox').prop('checked', 'checked');
}
The simplest solution is just to changed the checked property to checked seeing as you only selecting inputs you want already
And pass this into your onclick
<div><input type="checkbox" ID="checkall2" onclick="CheckAllClick(this);"> Check all</div>
What you probably want is this.
$('[id^=checkall]').click(function(){
$(this).closest('fieldset').find(':checkbox').not(this).prop('checked', function(i,oldval){
return !oldval;
});
});
Fiddle