Select radiobuttons of different values

Question

Select radiobuttons of different values

Navigation

#1 by (0 votes)

2

I'm starting in the html area and I'm doing a few pages for myself (for testing) and in one I did have some radiobuttons , the issue is that I'd like to leave them compulsory to select 2 of them, one in each area, and that the selected colors were not the same, type has to be different colors. type, the letter color can not be the same as the background color. Let's say the user selects the black color, and if he selects black on the background color will also display a msg: "Colors can not be the same". in case he 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

asked by anonymous 10.12.2016 / 01:53

1 answer

How to force the download of a pdf? Remove loader after the page has fully loaded

score 0 · Accepted Answer

I do not know how to do this with only 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>