Parsing thru IDs and finding a range of IDs

JavaScript
1

I would like to know how to find all ids in an html document and parse through them to find a range of IDs, and then do something with the elements of that range of IDs. For example, in the following html, you will notice that I have the IDs organized in a way so there are two levels of subsets. There are going to be instances where I am going to want to do something with the elements of an ID and all of its subset IDs. In other words, clicking on the text “something 2” would do something like change the text of “something 2”, “something 2.1”, “something 2.2”, “something 2.2.1”, & “something 2.2.2”, to the color of blue. I don’t know how else to describe it, so I hope that all makes sense. Sorry that I don’t show an code that I have attempted. I have ideas of what is needed, but those ideas have gaps and I can’t formulate any of them.

<div id="divBlock_1" onclick="chkSelect('1');">something 1</div>
<div id="divBlock_2" onclick="chkSelect('2');">something 2</div>
	<div id="divBlock_2.1" onclick="chkSelect('2.1');">something 2.1</div>
	<div id="divBlock_2.2" onclick="chkSelect('2.2');">something 2.2</div>
		<div id="divBlock_2.2.1" onclick="chkSelect('2.2.1');">something 2.2.1</div>
		<div id="divBlock_2.2.2" onclick="chkSelect('2.2.2');">something 2.2.2</div>
<div id="divBlock_3" onclick="chkSelect('3');">something 3</div>
<div id="divBlock_4" onclick="chkSelect('4');">something 4</div>
<div id="divBlock_5" onclick="chkSelect('5');">something 5</div>
2

Hi,

This code looks a bit verbose. Perhaps you could try to structure it differently and make better use of selectors.

I know that turning the text blue was just an example, but perhaps this gives you something to go on.

<div id="container">
  <div>something 1</div>
  <div>something 2
    <div>something 2.1</div>
    <div>something 2.2</div>
    <div>something 2.2.1</div>
    <div>something 2.2.2</div>
  </div>
  <div>something 3</div>
  <div>something 4</div>
  <div>something 5</div>
</div>

and

const elems = document.querySelectorAll("#container > div");

for (let i = 0; i < elems.length; i++) {
  elems[i].addEventListener('click', changeColor, false);
}

function changeColor() {
  let currColor = this.style.color;
  this.style.color = (currColor === "blue") ? "black" : "blue";
}

Here’s a demo.

3

Thanks, Pullo!

This IS mostly what I was after, however, clicking on “something 2.2”, should only effect “something 2.2”,“something 2.2.1”, and “something 2.2.2”. I will take a look at it and see if I can get it to work the way I want.

Thanks again for working on it, though, I really do appreciate it!!

4

No worries.

So if I click “something 2.2”, it should turn “something 2.2”,“something 2.2.1”, and “something 2.2.2” blue.

If “something 2.2”,“something 2.2.1”, and “something 2.2.2” are blue and I then click “something 2.2.2” - what should happen?

And what should happen if I then click “something 2.2” after that?

5

OK, so it’s a bit more complicated then just clicking on the div text and having it turn blue. I did not want to post a bunch of code, so I tried to simplify it. I thought that if I knew the concept I would be able to figure out what I really want to do.

So here is what I am really after: in the html, you will see that I have categories and sub categories. There are two sets of radio buttons for each listed item. All the radio button questions are hidden until you click on the text. If you answer both questions and close the questions by clicking on the item’s text, the text turns blue, indicating that you have completed answering the questions for that item. All of that I have figured out already and it works fine.

What I am now trying to do is make it so if the 5th radio button of the first question is checked, it will also cause the 5th radio button of the second question and all other 5th radio buttons of its subsets to be checked. It should then cause the item’s text to change to blue and all the subset item’s text to change to blue when the item is clicked to hide the questions.

In other words, if you click on “Common House” and check “Absolutely don’t want”, when you click on “Common House” again to hide the questions, all of the 5th radio buttons (“Absolutely don’t want” & “Never”) will get checked and all the Item Text from “Common House” to “Dart Board” will be changed to blue.

If, instead, you click on “Game Room / Area” and check “Absolutely don’t want”, when you click on “Game Room / Area” again to hide the questions, all of the 5th radio buttons (“Absolutely don’t want” & “Never”) will get checked and all the Item Text from “Game Room / Area” to “Dart Board” will be changed to blue.

I know, I probably should have just posted all this originally. I just thought I was saving you all from having to read extra code.

Javascript:

<script type="text/javascript">

function chkSelect(Qnum) 
 { 
 var n=false, p=false;
 var need = document.getElementsByName('NeedRank_' + Qnum); 
   var priority = document.getElementsByName('PriorityRank_' + Qnum);	 
   var outerObj = document.getElementById("outerText_" + Qnum);
   var innerObj = document.getElementById("innerText_" + Qnum);
   var divblkObj = document.getElementById("divBlock_" + Qnum); 
   var msgObj=document.getElementById("msg");
   var nValue5 = document.getElementById("n" + Qnum + "v5");
   var pValue5 = document.getElementById("p" + Qnum + "v5");
    
  //
   if(innerObj.style.display == "none") 
     { outerObj.style.color = "#2BA5AB"; // cyan
       innerObj.style.display = "block";
       divblkObj.style.backgroundColor = "#F0FFF0"; //lt green
	 }  	
   else 
     { outerObj.style.color = "#000";   // black
       innerObj.style.display = "none";
       divblkObj.style.backgroundColor = "transparent";
       var i;
       for ( i = 0; i < need.length; i++) 
         { if (need[i].checked){ n = true; } }
        //	   
       for ( i = 0; i < priority.length; i++) 
          { if (priority[i].checked) { p = true; } } 
		//	
       if ((n == p && n == true) || (need.value('need_5').checked)){ outerObj.style.color = "#00F"; }// blue 
   	
       else { outerObj.style.color = "#000"; } // black
      }
      msgObj.innerHTML="need selected= "+n+"; priority selected= "+p+";";
     
  }
</script>

HTML:
(Note: I had to cut out some of the HTML because I was limited to 32000 characters)

<form id="contact-form" action="script.php" method="post">
	<div id="divBlock_1" class="divBlocks">
		<h5 id="outerText_1" onclick="chkSelect('1');"><img alt="disc" src="images/disc.gif" style="height:16px;width:16px;margin-right:5px;vertical-align:middle"/>Common House</h5> 
		<div id="innerText_1" style="display: none">		
		    <h6 class="spacer">Need:</h6>
		    <span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1" value="need_1" style="width: 25px"/>
		    <span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1" value="need_2" style="width: 25px"/>
		    <span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1" value="need_3" style="width: 25px"/>
		    <span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1" value="need_4" style="width: 25px"/>
		    <span class="spacer">Absolutely don't want</span><input type="radio" id="n1v5" name="NeedRank_1" value="need_5" style="width: 25px"/>
		    <br/><br/>
			<h6 class="spacer">Priority:</h6>
		    <span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1" value="Priority_1" style="width: 25px"/>
		    <span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1" value="Priority_2" style="width: 25px"/>
		    <span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1" value="Priority_3" style="width: 25px"/>
		    <span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1" value="Priority_4" style="width: 25px"/>
		    <span class="spacer">Never</span><input type="radio" id="p1v5" name="PriorityRank_1" value="Priority_5" style="width: 25px"/>
	    </div>
	</div>
	
	<div id="divBlock_1.1" class="divBlocks_sub1">
		<h5 id="outerText_1.1" onclick="chkSelect('1.1');"><img alt="circle" src="images/circle.gif" style="height:16px;width:16px;margin-right:5px;vertical-align:middle" />Kitchen</h5> 
		<div id="innerText_1.1" style="display: none">		
		    <h6 class="spacer">Need:</h6>
		    <span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1.1" value="need_1" style="width: 25px"/>
		    <span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1.1" value="need_2" style="width: 25px"/>
		    <span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1.1" value="need_3" style="width: 25px"/>
		    <span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1.1" value="need_4" style="width: 25px"/>
		    <span class="spacer">Absolutely don't want</span><input type="radio" id="n1.1v5" name="NeedRank_1.1" value="need_5" style="width: 25px"/>
		    <br/><br/>
			<h6 class="spacer">Priority:</h6>
		    <span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1.1" value="Priority_1" style="width: 25px"/>
		    <span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1.1" alue="Priority_2" style="width: 25px"/>
		    <span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1.1" value="Priority_3" style="width: 25px"/>
		    <span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1.1" value="Priority_4" style="width: 25px"/>
		    <span class="spacer">Never</span><input type="radio" id="p1.1v5" name="PriorityRank_1.1" value="Priority_5" style="width: 25px"/>
	    </div>
	</div>
	
	<div id="divBlock_1.2" class="divBlocks_sub1">
		<h5 id="outerText_1.2" onclick="chkSelect('1.2');"><img alt="circle" src="images/circle.gif" style="height:16px;width:16px;margin-right:5px;vertical-align:middle" />Dining / All Purpose Room</h5> 
		<div id="innerText_1.2" style="display: none">		
		    <h6 class="spacer">Need:</h6>
		    <span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1.2" value="need_1" style="width: 25px"/>
		    <span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1.2" value="need_2" style="width: 25px"/>
		    <span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1.2" value="need_3" style="width: 25px"/>
		    <span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1.2" value="need_4" style="width: 25px"/>
		    <span class="spacer">Absolutely don't want</span><input type="radio" id="n1.2v5" name="NeedRank_1.2" value="need_5" style="width: 25px"/>
		    <br/><br/>
			<h6 class="spacer">Priority:</h6>
		    <span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1.2" value="Priority_1" style="width: 25px"/>
		    <span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1.2" value="Priority_2" style="width: 25px"/>
		    <span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1.2" value="Priority_3" style="width: 25px"/>
		    <span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1.2" value="Priority_4" style="width: 25px"/>
		    <span class="spacer">Never</span><input type="radio" id="p1.2v5" name="PriorityRank_1.2" value="Priority_5" style="width: 25px"/>
	    </div>
	</div>
	
	<div id="divBlock_1.3" class="divBlocks_sub1">
		<h5 id="outerText_1.3" onclick="chkSelect('1.3');"><img alt="circle" src="images/circle.gif" style="height:16px;width:16px;margin-right:5px;vertical-align:middle" />Office</h5> 
		<div id="innerText_1.3" style="display: none">		
		    <h6 class="spacer">Need:</h6>
		    <span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1.3" value="need_1" style="width: 25px"/>
		    <span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1.3" value="need_2" style="width: 25px"/>
		    <span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1.3" value="need_3" style="width: 25px"/>
		    <span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1.3" value="need_4" style="width: 25px"/>
		    <span class="spacer">Absolutely don't want</span><input type="radio" id="n1.3v5" name="NeedRank_1.3" value="need_5" style="width: 25px"/>
		    <br/><br/>
			<h6 class="spacer">Priority:</h6>
		    <span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1.3" value="Priority_1" style="width: 25px"/>
		    <span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1.3" value="Priority_2" style="width: 25px"/>
		    <span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1.3" value="Priority_3" style="width: 25px"/>
		    <span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1.3" value="Priority_4" style="width: 25px"/>
		    <span class="spacer">Never</span><input type="radio" id="p1.3v5" name="PriorityRank_1.3" value="Priority_5" style="width: 25px"/>
	    </div>
	</div>

	<div id="divBlock_1.4" class="divBlocks_sub1">
		<h5 id="outerText_1.4" onclick="chkSelect('1.4');"><img alt="circle" src="images/circle.gif" style="height:16px;width:16px;margin-right:5px;vertical-align:middle" />Library (Area)</h5> 
		<div id="innerText_1.4" style="display: none">		
		    <h6 class="spacer">Need:</h6>
		    <span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1.4" value="need_1" style="width: 25px"/>
		    <span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1.4" value="need_2" style="width: 25px"/>
		    <span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1.4" value="need_3" style="width: 25px"/>
		    <span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1.4" value="need_4" style="width: 25px"/>
		    <span class="spacer">Absolutely don't want</span><input type="radio" id="n1.4v5" name="NeedRank_1.4" value="need_5" style="width: 25px"/>
		    <br/><br/>
			<h6 class="spacer">Priority:</h6>
		    <span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1.4" value="Priority_1" style="width: 25px"/>
		    <span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1.4" value="Priority_2" style="width: 25px"/>
		    <span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1.4" value="Priority_3" style="width: 25px"/>
		    <span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1.4" value="Priority_4" style="width: 25px"/>
		    <span class="spacer">Never</span><input type="radio" id="p1.4v5" name="PriorityRank_1.4" value="Priority_5" style="width: 25px"/>
	    </div>
	</div>

	<div id="divBlock_1.5" class="divBlocks_sub1">
		<h5 id="outerText_1.5" onclick="chkSelect('1.5');"><img alt="circle" src="images/circle.gif" style="height:16px;width:16px;margin-right:5px;vertical-align:middle" />Restroom</h5> 
		<div id="innerText_1.5" style="display: none">		
		    <h6 class="spacer">Need:</h6>
		    <span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1.5" value="need_1" style="width: 25px"/>
		    <span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1.5" value="need_2" style="width: 25px"/>
		    <span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1.5" value="need_3" style="width: 25px"/>
		    <span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1.5" value="need_4" style="width: 25px"/>
		    <span class="spacer">Absolutely don't want</span><input type="radio" id="n1.5v5" name="NeedRank_1.5" value="need_5" style="width: 25px"/>
		    <br/><br/>
			<h6 class="spacer">Priority:</h6>
		    <span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1.5" value="Priority_1" style="width: 25px"/>
		    <span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1.5" value="Priority_2" style="width: 25px"/>
		    <span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1.5" value="Priority_3" style="width: 25px"/>
		    <span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1.5" value="Priority_4" style="width: 25px"/>
		    <span class="spacer">Never</span><input type="radio" id="p1.5v5" name="PriorityRank_1.5" value="Priority_5" style="width: 25px"/>
	    </div>
	</div>

	<div id="divBlock_1.6" class="divBlocks_sub1">
		<h5 id="outerText_1.6" onclick="chkSelect('1.6');"><img alt="circle" src="images/circle.gif" style="height:16px;width:16px;margin-right:5px;vertical-align:middle" />Gifts (Area)</h5> 
		<div id="innerText_1.6" style="display: none">		
		    <h6 class="spacer">Need:</h6>
		    <span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1.6" value="need_1" style="width: 25px"/>
		    <span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1.6" value="need_2" style="width: 25px"/>
		    <span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1.6" value="need_3" style="width: 25px"/>
		    <span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1.6" value="need_4" style="width: 25px"/>
		    <span class="spacer">Absolutely don't want</span><input type="radio" id="n1.6v5" name="NeedRank_1.6" value="need_5" style="width: 25px"/>
		    <br/><br/>
			<h6 class="spacer">Priority:</h6>
		    <span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1.6" value="Priority_1" style="width: 25px"/>
		    <span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1.6" value="Priority_2" style="width: 25px"/>
		    <span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1.6" value="Priority_3" style="width: 25px"/>
		    <span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1.6" value="Priority_4" style="width: 25px"/>
		    <span class="spacer">Never</span><input type="radio" id="p1.6v5" name="PriorityRank_1.6" value="Priority_5" style="width: 25px"/>
	    </div>
	</div>

	<div id="divBlock_1.7" class="divBlocks_sub1">
		<h5 id="outerText_1.7" onclick="chkSelect('1.7');"><img alt="circle" src="images/circle.gif" style="height:16px;width:16px;margin-right:5px;vertical-align:middle" />Bedroom(s)</h5> 
		<div id="innerText_1.7" style="display: none">		
		    <h6 class="spacer">Need:</h6>
		    <span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1.7" value="need_1" style="width: 25px"/>
		    <span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1.7" value="need_2" style="width: 25px"/>
		    <span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1.7" value="need_3" style="width: 25px"/>
		    <span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1.7" value="need_4" style="width: 25px"/>
		    <span class="spacer">Absolutely don't want</span><input type="radio" id="n1.7v5" name="NeedRank_1.7" value="need_5" style="width: 25px"/>
		    <br/><br/>
			<h6 class="spacer">Priority:</h6>
		    <span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1.7" value="Priority_1" style="width: 25px"/>
		    <span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1.7" value="Priority_2" style="width: 25px"/>
		    <span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1.7" value="Priority_3" style="width: 25px"/>
		    <span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1.7" value="Priority_4" style="width: 25px"/>
		    <span class="spacer">Never</span><input type="radio" id="p1.7v5" name="PriorityRank_1.7" value="Priority_5" style="width: 25px"/>
	    </div>
	</div>

	<div id="divBlock_1.12" class="divBlocks_sub1">
		<h5 id="outerText_1.12" onclick="chkSelect('1.12');"><img alt="circle" src="images/circle.gif" style="height:16px;width:16px;margin-right:5px;vertical-align:middle" />Game Room / Area</h5> 
		<div id="innerText_1.12" style="display: none">		
		    <h6 class="spacer">Need:</h6>
		    <span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1.12" value="need_1" style="width: 25px"/>
		    <span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1.12" value="need_2" style="width: 25px"/>
		    <span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1.12" value="need_3" style="width: 25px"/>
		    <span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1.12" value="need_4" style="width: 25px"/>
		    <span class="spacer">Absolutely don't want</span><input type="radio" id="n1.12v5" name="NeedRank_1.12" value="need_5" style="width: 25px"/>
		    <br/><br/>
			<h6 class="spacer">Priority:</h6>
		    <span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1.12" value="Priority_1" style="width: 25px"/>
		    <span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1.12" value="Priority_2" style="width: 25px"/>
		    <span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1.12" value="Priority_3" style="width: 25px"/>
		    <span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1.12" value="Priority_4" style="width: 25px"/>
		    <span class="spacer">Never</span><input type="radio" id="p1.12v5" name="PriorityRank_1.12" value="Priority_5" style="width: 25px"/>
	    </div>
	</div>

	<div id="divBlock_1.12.1" class="divBlocks_sub2">
		<h5 id="outerText_1.12.1" onclick="chkSelect('1.12.1');"><img alt="square" src="images/solid-square.gif" style="height:16px;width:16px;margin-right:5px;vertical-align:middle" />Pinball</h5> 
		<div id="innerText_1.12.1" style="display: none">		
		    <h6 class="spacer">Need:</h6>
		    <span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1.12.1" value="need_1" style="width: 25px"/>
		    <span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1.12.1" value="need_2" style="width: 25px"/>
		    <span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1.12.1" value="need_3" style="width: 25px"/>
		    <span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1.12.1" value="need_4" style="width: 25px"/>
		    <span class="spacer">Absolutely don't want</span><input type="radio" id="n1.12.1v5" name="NeedRank_1.12.1" value="need_5" style="width: 25px"/>
		    <br/><br/>
			<h6 class="spacer">Priority:</h6>
		    <span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1.12.1" value="Priority_1" style="width: 25px"/>
		    <span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1.12.1" value="Priority_2" style="width: 25px"/>
		    <span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1.12.1" value="Priority_3" style="width: 25px"/>
		    <span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1.12.1" value="Priority_4" style="width: 25px"/>
		    <span class="spacer">Never</span><input type="radio" id="p1.12.1v5" name="PriorityRank_1.12.1" value="Priority_5" style="width: 25px"/>
	    </div>
	</div>

	<div id="divBlock_1.12.2" class="divBlocks_sub2">
		<h5 id="outerText_1.12.2" onclick="chkSelect('1.12.2');"><img alt="square" src="images/solid-square.gif" style="height:16px;width:16px;margin-right:5px;vertical-align:middle" />Foosball</h5> 
		<div id="innerText_1.12.2" style="display: none">		
		    <h6 class="spacer">Need:</h6>
		    <span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1.12.2" value="need_1" style="width: 25px"/>
		    <span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1.12.2" value="need_2" style="width: 25px"/>
		    <span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1.12.2" value="need_3" style="width: 25px"/>
		    <span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1.12.2" value="need_4" style="width: 25px"/>
		    <span class="spacer">Absolutely don't want</span><input type="radio" id="n1.12.2v5" name="NeedRank_1.12.2" value="need_5" style="width: 25px"/>
		    <br/><br/>
			<h6 class="spacer">Priority:</h6>
		    <span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1.12.2" value="Priority_1" style="width: 25px"/>
		    <span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1.12.2" value="Priority_2" style="width: 25px"/>
		    <span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1.12.2" value="Priority_3" style="width: 25px"/>
		    <span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1.12.2" value="Priority_4" style="width: 25px"/>
		    <span class="spacer">Never</span><input type="radio" id="p1.12.2v5" name="PriorityRank_1.12.2" value="Priority_5" style="width: 25px"/>
	    </div>
	</div>

	<div id="divBlock_1.12.6" class="divBlocks_sub2">
		<h5 id="outerText_1.12.6" onclick="chkSelect('1.12.6');"><img alt="square" src="images/solid-square.gif" style="height:16px;width:16px;margin-right:5px;vertical-align:middle" />Dart Board</h5> 
		<div id="innerText_1.12.6" style="display: none">		
		    <h6 class="spacer">Need:</h6>
		    <span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1.12.6" value="need_1" style="width: 25px"/>
		    <span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1.12.6" value="need_2" style="width: 25px"/>
		    <span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1.12.6" value="need_3" style="width: 25px"/>
		    <span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1.12.6" value="need_4" style="width: 25px"/>
		    <span class="spacer">Absolutely don't want</span><input type="radio" id="n1.12.6v5" name="NeedRank_1.12.6" value="need_5" style="width: 25px"/>
		    <br/><br/>
			<h6 class="spacer">Priority:</h6>
		    <span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1.12.6" value="Priority_1" style="width: 25px"/>
		    <span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1.12.6" value="Priority_2" style="width: 25px"/>
		    <span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1.12.6" value="Priority_3" style="width: 25px"/>
		    <span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1.12.6" value="Priority_4" style="width: 25px"/>
		    <span class="spacer">Never</span><input type="radio" id="p1.12.6v5" name="PriorityRank_1.12.6" value="Priority_5" style="width: 25px"/>
	    </div>
	</div>

	    
</form>
6

No, not at all. It’s a difficult concept to get across and boiling it down like you did is awesome!

What I would do in this case is hide everything but the top category by default and then have the options appear as you make the appropriate selection (kinda turning your approach on its head).

So, in your example, all that would display initially is Common House. When you click this, the item should expand to show the first row of radio buttons. If the user selects “Absolutely don’t want” the question is maked as answered and no further action is necessary.

If however, they select anything else, the second row of radio buttons is displayed, minus the “never” option. Once they have selected a priority, the next level of options is displayed — so in this case Kitchen, Dining / All Purpose Room, Office, Library (Area), Restroom, Gifts (Area), Bedroom(s), but not Pinball, Foosball or Dart Board, which are sub categories of Bedroom(s). These would only be displayed, once the user has specified that they actually want a bedroom.

Does that make sense?

7

Interesting! I will think about that and maybe work on it a bit to see if that will work for me. I will let you know how it goes. There is one thing, however, that may not work with that idea. The next thing I was going to work on is having a box next to each question showing how many people checked that particular question. I kind of want all the questions somewhat accessible so others can see how others have chosen. Your idea still might work, I just have to think about it a bit.

One other thing I should mention is that I am planning on also including the ability to create new categories at the end of each category, sub-category and sub-sub-category, so the entire category list and numbering system is going to be dynamic.

8

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