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;
}
}
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
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.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
Trying to change the color of the text with javascript - here is what I have
<input name="text" value="black" id="black" type="radio" onclick="changetextcolor(this);">"Black"
<input name="text" value="purple" id="purple" type="radio" onclick="changetextcolor(this);">"Purple"
<input name="text" value="lightpink" id="lightpink" type="radio" onclick="changetextcolor(this);">"Light Pink"
function changetextcolor(element){
document.body.style.Color = element.value;
};
here is the web page I am working on http://www.acsu.buffalo.edu/~mariaroo/validation.html
You have to put color property in lowercase and not with capital letters.
color and not Color.
function changetextcolor(element){
console.log(element.value);
document.body.style.color = element.value;
};
<input name="text" value="black" id="black" type="radio" onclick="changetextcolor(this);">Black
<input name="text" value="Purple" id="purple" type="radio" onclick="changetextcolor(this);">Purple
<input name="text" value="lightpink" id="lightpink" type="radio" onclick="changetextcolor(this);">Light Pink
You're changing the wrong property in your code. It should be document.body.style.color (note all lowercase color).
You mixed something up.
You can not use a .text property for styling the color of your text.
Try .color instead. This should work.
function changetextcolor(element){
document.body.style.color = element.value;
};
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 6 years ago.
Improve this question
I want to select elements that have an autofocus attribute present. For some reason, my jquery selector $("[autofocus]") isn't returning anything.
I imagine this is a simple solution, I just can't see what I'm doing wrong (is it a bug?!).
Browser: Chrome - Version 52.0.2743.116 m (64-bit)
HTML :
<input id="a" type="text" autofocus="autofocus" value="a" />
<input id="b" type="text" autofocus="autofocus" value="b" />
<input id="c" type="text" autofocus="autofocus" value="c" />
Javascript :
console.log($("[type=text]").length); // -> 3
console.log($("[autofocus]").length); // -> 0
console.log($("[autofocus=autofocus]").length); // -> 0
Why can't I select the autofocus attribute?
JSBin
Working fiddle
Your code works just fine as you could see in the example below. the bug come from the JsBin that translate the autofocus="autofocus" to ="autofocus".
Hope this helps.
var focusFn = function(){
console.log("inside fn");
console.log($("[type=text]").length);
console.log($("[autofocus]").length);
console.log($("[autofocus=autofocus]").length);
$("input[type=text]:visible:first").focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="focus" onclick="focusFn()"></input><br/>
<input id="a" type="text" autofocus="autofocus" value="a" /><br/>
<input id="b" type="text" autofocus="autofocus" value="b" /><br/>
<input id="c" type="text" autofocus="autofocus" value="c" /><br/>
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 is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I recently laid out a fairly simple quiz question with jQuery (show / hide, addclass and a variable to count attempts and respond if attempts = 2), and I'm trying to figure out the best practice for replicating the same code on multiple questions. Would the best practice be to change all the variables for both the HTML layout and the jQuery? Or is there a more efficient way to add a second / third.. etc question?
Here's how I laid out the first question.
<form class="ra">
<div class="cor">
<input type="radio" name="question1" class="c1" />A. Choice A<span class="hiddencorr">Correct answer</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i1" />B. Choice B<span class="incorr">Your choice</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i2" />C. Choice C<span class="incorr">Your choice</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i3" />D. Choice D<span class="incorr">Your choice</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i4" />E. Choice E<span class="incorr">Your choice</span>
</div>
</form>
<p class="rationale1"><b>Rationale:</b>
<br />
<br /><span class="rattext">Explanation of what was done wrong.</span>
</p>
<button id="radiochk1" class="checkhide">Check your answer</button>
<button id="resetq1" class="reset">Reset</button>
JS / CSS & functionality in fiddle.
http://jsfiddle.net/YSSWL/97/
Class values related to initial style and layout typically should not differ among like elements (though those indicating state could). Instead, increment your name and ID attributes using jQuery, similarly to what you're doing now for class.
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