Controled checkboxes by checkbox

toronto2009 · January 24, 2021, 5:13pm

Hi
my name is frank and I try to experiment checkbox control by checkbox. it looks working but I need help with display, appearance. using bs3 at moment, the bs3 checkbox “template” from w3schools ‘falls apart’ at display after applying my idea. I don’t understand why. please help me to get a well formatted display, thank you.

<!DOCTYPE html> 

<head> 
	<title> 
		How to check a checkbox with jQuery? 
	</title> 

	<script src= 
"https://code.jquery.com/jquery-2.2.4.min.js"> 
	</script> 
</head> 

<body> 
	<center> 
		<h1 style="color: green"> 
		GeeksforGeeks 
		</h1> 

		<b> 
		jQuery Check/Uncheck Checkbox 
		</b> 

		<p> 
		    <label><input type="checkbox" name="option" id="checkcontrol"> 
			contact yes/no</label>
			
			<div class="checkbox">
			<label><input type="checkbox" name="option" id="male"> 
			Male</label> 
			</div>
			
            <div class="checkbox">
			<label><input type="checkbox" name="option" id="female"> 
			Female</label> 
			</div>
			
			<div class="checkbox">
			<label><input type="checkbox" name="option" id="notdeclared"> 
			Not declared</label> 
			</div>
		</p> 

		<p> 
			<button type="button" class="check-male"> 
				male 
			</button> 

			<button type="button" class="check-female"> 
				female 
			</button>
			
			<button type="button" class="check-notdeclared"> 
				notdeclared 
			</button>	

			<button type="button" class="reset"> 
				Reset 
			</button> 
		</p> 

		<script type="text/javascript"> 
			$(document).ready(function() { 
			    $("#checkcontrol").blur(function() { 
					//$("#checkcontrol").prop("checked", true); 
					//if (input === "" ) {alert("empty"); }
				}); 
				$(".check-male").click(function() { 
					$("#male").prop("checked", true); 
					//if (input === "" ) {alert("empty"); }
				}); 
				$(".check-female").click(function() { 
					$("#female").prop("checked", true);
					//if (input === "" ) {alert("empty"); }	
				}); 
				$(".check-notdeclared").click(function() { 
					$("#notdeclared").prop("checked", true);
					//if (input === "" ) {alert("empty"); }	
				});
				
								
				$(".reset").click(function() { 
					$("#male").prop("checked", false); 
					$("#female").prop("checked", false); 
					$("#notdeclared").prop("checked", false); 
				}); 
				$('#checkcontrol').click(function(){
					if($(this).prop("checked") == true){
						console.log("Checkbox is checked.");
						$('div.chckbox').addClass("disabled");
						//checkbox
						$( "#male" ).prop( "disabled", true );
						$( "#female" ).prop( "disabled", true );
						$( "#notdeclared" ).prop( "disabled", true );
						//button
						$( ".check-male" ).prop( "disabled", true );
						$( ".check-female" ).prop( "disabled", true );
						$( ".check-notdeclared" ).prop( "disabled", true );
						$( ".reset" ).prop( "disabled", true );
						//alert("not empty");
					}
					else if($(this).prop("checked") == false){
						console.log("Checkbox is unchecked.");
						$('div.chckbox').removeClass("disabled");
						//checkbox
						$( "#male" ).prop( "disabled", false );
						$( "#female" ).prop( "disabled", false );
						$( "#notdeclared" ).prop( "disabled", false );
						//button
						$( ".check-male" ).prop( "disabled", false );
						$( ".check-female" ).prop( "disabled", false );
						$( ".check-notdeclared" ).prop( "disabled", false );
						$( ".reset" ).prop( "disabled", false );
						//alert("empty");
						$(div.chckbox).removeClass("disabled");
					}
        });
				
			}); 
		</script> 
	</center> 
</body> 

</html>

TechnoBear · January 24, 2021, 5:40pm

Off Topic:

Remember to validate your code. https://validator.w3.org

The <center> tag is obsolete and should not be used.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

toronto2009 · January 24, 2021, 5:44pm

OK , I’ll do it, thank you.

PaulOB · January 24, 2021, 6:44pm

What’s wrong with this.

Compare it to the similar one above to see your error.

toronto2009 · January 26, 2021, 5:24pm

the quotation marks are missing but I disabled them because I found it a duplicate statement. apart from that I’ve done checking with w3 validator and it looks ok but the appearance might be a bit redundant. please have a look, thank you.

<!DOCTYPE html>
<html lang="en">

<head> 

	<title> 
		How to check a checkbox with jQuery? 
	</title> 
	<meta charset="utf-8"/>

	<script src="https://code.jquery.com/jquery-2.2.4.min.js"> 
	</script> 
	<style>
		.centering{
			text-align:center;
			color: green;
		}
	</style>
</head> 

<body> 
	 
		<h1 class="centering" style=""> 
		GeeksforGeeks 
		</h1> 

		<b> 
		jQuery Check/Uncheck Checkbox 
		</b> 

		
		    <label>
			<input type="checkbox" name="option" id="checkcontrol"> 
			contact yes/no</label>
			
			<div class="checkbox">
			<input type="checkbox" name="option" id="male"> 
			<button type="button" class="check-male"> 
				Male 
			</button><label> Male</label> 
			</div>
			
            <div class="checkbox">
			<input type="checkbox" name="option" id="female"> 
			<button type="button" class="check-female"> 
				Female 
			</button><label>Female</label> 
			</div>
			
			<div class="checkbox">
			<input type="checkbox" name="option" id="notdeclared"> 
			<button type="button" class="check-notdeclared"> 
				Not declared 
			</button><label>Not declared</label> 
			</div>
		 
 		<button type="button" class="reset"> 
				Reset 
			</button> 
		

		<script> 
			$(document).ready(function() { 
			    $("#checkcontrol").blur(function() { 
					//$("#checkcontrol").prop("checked", true); 
					//if (input === "" ) {alert("empty"); }
				}); 
				$(".check-male").click(function() { 
					$("#male").prop("checked", true); 
					//if (input === "" ) {alert("empty"); }
				}); 
				$(".check-female").click(function() { 
					$("#female").prop("checked", true);
					//if (input === "" ) {alert("empty"); }	
				}); 
				$(".check-notdeclared").click(function() { 
					$("#notdeclared").prop("checked", true);
					//if (input === "" ) {alert("empty"); }	
				});
				
								
				$(".reset").click(function() { 
					$("#male").prop("checked", false); 
					$("#female").prop("checked", false); 
					$("#notdeclared").prop("checked", false); 
				}); 
				$('#checkcontrol').click(function(){
					if($(this).prop("checked") == true){
						console.log("Checkbox is checked.");
						$('div.chckbox').addClass("disabled");
						//checkbox
						$( "#male" ).prop( "disabled", true );
						$( "#female" ).prop( "disabled", true );
						$( "#notdeclared" ).prop( "disabled", true );
						//button
						$( ".check-male" ).prop( "disabled", true );
						$( ".check-female" ).prop( "disabled", true );
						$( ".check-notdeclared" ).prop( "disabled", true );
						$( ".reset" ).prop( "disabled", true );
						//alert("not empty");
					}
					else if($(this).prop("checked") == false){
						console.log("Checkbox is unchecked.");
						$('div.chckbox').removeClass("disabled");
						//checkbox
						$( "#male" ).prop( "disabled", false );
						$( "#female" ).prop( "disabled", false );
						$( "#notdeclared" ).prop( "disabled", false );
						//button
						$( ".check-male" ).prop( "disabled", false );
						$( ".check-female" ).prop( "disabled", false );
						$( ".check-notdeclared" ).prop( "disabled", false );
						$( ".reset" ).prop( "disabled", false );
						//alert("empty");
						//$("div.chckbox").removeClass("disabled");
					}
        });
				
			}); 
		</script> 
	 
</body> 

</html>

PaulOB · January 26, 2021, 7:36pm

Have a look at what exactly?

What is the problem and what are you trying to do and what should it look like? (3 questions to answer there)

It looks like the JS forum would probably be more appropriate unless you have css issues you need to resolve.

toronto2009 · January 26, 2021, 7:41pm

thank you for answer. I just need to double check the code. I would like use it in registration form. also button and label looks redundant by content. is it ok or there is a solution for ‘all in one’ option.thank you.

PaulOB · January 26, 2021, 8:26pm

If I knew what you were trying to achieve it would help

It looks from the demo that you are enabling and disabling some checkboxes when you click the first checkbox. However its not clear what you want or expect to happen. If the revealed inputs are checked and then you click to disable them they are not reset but just disabled. I’m not sure whether that’s a good idea as it may look like they have been chosen because they are still checked although disabled.

The code looks ugly and the html is non semantic as you seem to have replaced labels with buttons which is not very good for accessibility.

The clearer you can define your objectives the easier it will be to help. There is however a lot of duplication in that code anyway and if you are expanding the number of items the approach you are using would not be viable. You would probably need to add a convenient classnames to all the elements that need to be switched on and off and then cycle through them in js rather than naming each and every single one of them in your js.

toronto2009 · January 27, 2021, 9:01am

thank you for help. the reason of having this approach is , as you noticed, to enable/disable checkboxes. if someone doesn’t want them it is easier to disable them . yes I noticed disabling them it does not affect weather is checked or not so with disabling also I need uncheck or reset too. also convenient classes would be more helpful. but the problem is button label matter. can I use them parallel, side by side? can label be empty, not to repeat information regarding checkboxes? thank you.
ps I am thinking about making somehow label clickable, button like. I was thinking about divs also.thank you.

PaulOB · January 27, 2021, 12:02pm

The label is important for checkboxes as it identifies the input.

Why do you need a button next to the input?

You could just have a label. You can style the label to look like a button and fade it out when the input is disabled by using CSS.

I’ll put up a demo later today.

PaulOB · January 27, 2021, 2:07pm

Something like this:

However this is really a question for the JS forum now.

toronto2009 · January 27, 2021, 7:10pm

thank you for help. this is what I would like, it is relay nice, thank you.
ps my reasons for button type label are smaller mobile devices where we can operate easier with fingers. thank you.
ps also I forgot can I style button type label as buttons ? thank you

system · April 29, 2021, 2:10am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.