Sorry for the strange title.
I have a checkbox with the value hi
for example:
<input type="checkbox" value="hi" />
That checkbox is in a long list of checkboxes with different values. However, there are one or two checkboxes that also have the value hi
.
When the user ticks the checkbox with the value hi
, is it possible to tick all the other checkboxes with the same value automatically?
I would like to do this because I’m making a site with lots of checkboxes, some of them duplicates. If you are intrested, the code is here .
Thank you!
Hi,
I was able to get it to work with this. There might be a more elegant way to do the jquery, but this works:
<body>
<form action="">
<input type="checkbox" name="vehicle" value="hi">hi 1<br>
<input type="checkbox" name="vehicle" value="bye">bye<br>
<input type="checkbox" name="vehicle" value="hi">hi 2<br>
<input type="checkbox" name="vehicle" value="lois">lois<br>
<input type="checkbox" name="vehicle" value="hi">hi 3<br>
</form>
</body>
and
$( document ).ready(function() {
$("input[value='hi']").click(function(){
if ($(this).prop("checked")) {
$("[value='hi']").prop("checked", true);
}
})
});
Hope it helps.
2 Likes
@ksjazzguitar ’s answer is good enough for what you asked. But if you also want to uncheck all the “Hi” checkboxes upon unchecking one, this snippet helps
$("input[value='hi'][type='checkbox']").change(function(){
$("input[value='hi'][type='checkbox']").prop("checked", $(this).prop("checked"));
});
Check out the JS fiddle I created for you https://jsfiddle.net/jvq8xjgf/2/
2 Likes
Thank you both very much!
1 Like
Doesn’t seem to be working
Yeah, you need to include jquery. I don’t know github yet but a quick perusal seems to indicate that you didn’t. One way would be to put the line:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
in the “head” section of your html.
1 Like
Ah, okay. Thank you very much!
EDIT: Still doesn’t seem to be working. I’ve given the checkbox the class rattata
, and I have also given the JS checker that class.
$("input[value='rattata'][type='checkbox']").change(function(){
$("input[value='rattata'][type='checkbox']").prop("checked", $(this).prop("checked"));
});
That’s the checking code.
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<title>Pokefinder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/pokesprite.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="js/pokesprite.min.js" type="text/javascript"></script>
<link rel="shortcut icon" href="img/favicon.ico" />
<!-- Google analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-57282086-7', 'auto');
ga('send', 'pageview');
This file has been truncated. show original
Have I linked something wrong?
there’s one thing I could suggest.
The <footer>
tag should be inside <body>
tag
And in this fiddle I created from your Git source, It works totally fine for the Rattata checkbox.
Check this out … https://jsfiddle.net/oe56yedr
And if you want the same kind of action for all checkboxes, then this should be your code
$("input[type='checkbox']").change(function(){
$("input[value='"+$(this).val()+"'][type='checkbox']").prop("checked", $(this).prop("checked"));
});
Check this link for a demo https://jsfiddle.net/oe56yedr/3/
1 Like