Select radiobuttons of different values

Asked

Viewed 33 times

2

I’m starting in the html area and I’m making some pages for myself (for testing) and in one I did there are some radiobuttons, the point is that I would like to make them mandatory the selection of 2 of them, one in each area, and that the selected colors were not the same, type has to be different colors. type, the font color cannot be the same as the background color. Let’s say the user selects the black color, and if he selects black in the background color will also display an msg:"Colors cannot be equal". in case it will have to select different colors for the letter and background.

.bubble
	{
		border-radius: 10%;
		width: 55px;
		height: 55px;
		display: inline-block;
		box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .6), 0px 1px 0px 0px rgba(255, 255, 255, .10);
	} 
		  
.bubble-sm
	{
		width: 20px!important;
		height: 20px!important; 
	}
<br>COR DA LETRA<br><br>

<input type="radio" name="color" value="preto" required='true'><div class="bubble bubble-sm" style="background-color: #000000"></div>
<input type="radio" name="color" value="azul" required='true'><div class="bubble bubble-sm" style="background-color: #000080"></div>    			

<br><br>COR DO FUNDO<br><br>
		
<input type="radio" name="color2" value="preto" required='true'><div class="bubble bubble-sm" style="background-color: #000000"></div>
<input type="radio" name="color2" value="azul" required='true'><div class="bubble bubble-sm" style="background-color: #000080"></div>

html

  • it is very likely that you will have to use a condition in some specific language..

  • and how would that be? js?

  • I think so.... Have any notion of js ?

  • very little kkkm tried to mess with Function etc, but n achieve anything

  • > @Jefter Rocha > I advise you to read the following frameworks: > Materialize or the best known Bootstrap. > > 'Cause I’m telling you this? >R: Frameworks help and facilitate you when developing, such as using your query > above, in Materialize you only need to include a name inside the class > and your buttons are ready and your "effects" in Bootstrap is the same. > Take a look at the Materialize for example: > http://materializecss.com/forms.html > > Now to do this with HTML5 and CSS3 pure you will need to learn

  • If any of the answers are correct, consider validating it by clicking on the green icon below the evaluation arrows... Good Luck...

  • @Thiagodebonis I have no idea how to use this Materialize :\

Show 2 more comments

1 answer

0


I don’t know how to do it with just html, so I used javascript.

It’s not very optimized, but I already have an idea...

<body>
<br>COR DA LETRA<br><br>

<input id="black" type="radio" name="color" value="preto" required='true'><div class="bubble bubble-sm" style="background-color: #000000"></div>
<input id="blue" type="radio" name="color" value="azul" required='true'><div class="bubble bubble-sm" style="background-color: #000080"></div>    			

<br><br>COR DO FUNDO<br><br>
		
<input id="f_black" type="radio" name="color2" value="preto" required='true'><div class="bubble bubble-sm" style="background-color: #000000"></div>
<input id="f_blue" type="radio" name="color2" value="azul" required='true'><div class="bubble bubble-sm" style="background-color: #000080"></div>
</body>
<style>
.bubble
	{
		border-radius: 10%;
		width: 55px;
		height: 55px;
		display: inline-block;
		box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .6), 0px 1px 0px 0px rgba(255, 255, 255, .10);
	} 
		  
.bubble-sm
	{
		width: 20px!important;
		height: 20px!important; 
	}
</style>
<script>

  var blue = document.getElementById("blue");
  var black = document.getElementById("black");
  var f_blue = document.getElementById("f_blue");
  var f_black = document.getElementById("f_black");
  f_blue.addEventListener("click", function()
      {
      	if(blue.checked == true){
      	alert("Selecione outra cor");
      	f_blue.checked = false;}
      });
   f_black.addEventListener("click", function()
      {
      	if(black.checked == true){
      	alert("Selecione outra cor");
      	f_black.checked = false;}
      });
   blue.addEventListener("click", function()
      {
      	if(f_blue.checked == true){
      	alert("Selecione outra cor");
      	f_blue.checked = false;}
      });
   black.addEventListener("click", function()
      {
      	if(f_black.checked == true){
      	alert("Selecione outra cor");
      	f_black.checked = false;}
      });
</script>

  • this is kind of what I really want, but I’ve been trying to apply some more colors(other 2 input) and it didn’t work with them...

  • It’s every case is a case, if the code of your ultimate goal, agent tries to suit...

  • No no! it was my own mistake vlw! that’s what I was looking for!

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.