Checkbox values - how to check a box with the same value?

Checkbox values - how to check a box with the same value?
0.0 0

#1

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!


#2

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.


#3

@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/


#4

Thank you both very much!


#5

Doesn’t seem to be working :confused:


#6

Did you include jQuery ?


#7

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.


#8

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:

Have I linked something wrong?


#9

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/