We Keep Coding

What am I missing in my third JavaScript function?

INTRO:
Providing a little context: I am trying to create workaround solutions in a HTML/CSS/JS based webticket builder.
This means I am creating online forms with a drag and drop tool that automatically generates titles, names, ids and all that in the general HTML code. So what I can't do is change the overall set up.
Every selection field I create though gives me a small textfield which is supposed to be used as a help field for this particular selection field. So for example I have a text field "mail adress" - the help text would then show "please use the format firstname.lastname#mailprovider.com" underneath it.
This "help" textbox is plain HTML, providing me with the possibility to add extra code inbetween - hence it's everything but pretty.
the html layout is not my idea, and I can only partially change it.
What I want to do:
Create an extra list with empty links, so I can use "onclick" on each item:
<!-- automatically visible -->
<!-- Checkbox im Status checked -->
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:
<!-- Modal / Pop Up Fenster -->
<div id="mymodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- List items as links to make them clickable -->
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="#" onclick="returncontent(this);return false;showitem1();">Item 1</a></li>
<li><a id="li2" title="item2" href="#" onclick="returncontent(this);return false;showitem2();">Item 2</a></li>
<li><a id="li3" title="item3" href="#" onclick="returncontent(this);return false;showitem3();">Item 3</a></li>
</font>
</ul>
</div>
</div>
The selection list then has 3 triggering functions:
1. returning the selected item to another textfield (works)
2. not opening a "#" site (works)
3. show further selection fields based on the selected list item (does not work)
This is basically an attempt to create a dynamic webform, as the tool itself doesn't provide such options
So this is what I additionally have:
- a fieldset with class "item1" and two textfields:
This code is copied directly from the tool, hence the intuitive ids and layout in general.
<fieldset class="item1"><legend>Item 1 Selections</legend><div id="d_000000001845952" class="field text"><label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div><div id="d_000000001844977" class="field text "><label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" /></div></fieldset>
a CSS code hiding the fieldset "item1" when the webform is opened:
.item1 {
display: none;
}
and my js functions:
The first to return selected item to a specific textfield:
<script type = "text/JavaScript">
function returncontent(elem) {
document.getElementById("f_000000001845521").value=elem.title;
document.getElementById("mymodal").style.display = "none";
document.getElementById("check").checked = false;
}
returncontent();
</script>
And the second to show me the necessary selection fields for list item 1:
<script type = "text/JavaScript">
function showitem1() {
document.getElementsByClassName("item1")[0].style.display = "block";
}
</script>
And now the latter is, what doesn't work and I don't understand why.
I have build several checkboxes that display/hide individual fields and fieldsets via ID or class so for my understanding I didn't do anything different this time except triggering two functions at once.
Here you can find a fiddle of what I am trying to do.

I do not know why you do it, but your problem will be solved by changing the order of functions in your onclick. I changed the place of return false; after showitem1()
Check workable version here
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="#" onclick="returncontent(this);showitem1();return false;">Item 1</a></li>
<li><a id="li2" title="item2" href="#" onclick="returncontent(this);showitem2();return false;">Item 2</a></li>
<li><a id="li3" title="item3" href="#" onclick="returncontent(this);showitem3();return false;">Item 3</a></li>
</font>
</ul>

I've change a couple parts of your code here but the most notable is that you can call the first (almost global type of function) from the the second function. I did also combine the three showitem functions into one and set which fieldset to show based off the clicked elements title.
You can call each function from the onclick. You would simply need to change the order of return false;, placing it at the end (or just remove it and return: false; from the function!?!).
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementById("mymodal").style.display = "block";
var els = document.getElementsByClassName("item");
Array.prototype.forEach.call(els, function(el) {
el.style.display = "none";
});
} else {
document.getElementById("mymodal").style.display = "none";
}
}
toggleBoxVisibility();
function returncontent(elem) {
document.getElementById("f_000000001845521").value = elem.title;
document.getElementById("mymodal").style.display = "none";
document.getElementById("check").checked = false;
}
function showitem(elem) {
returncontent(elem);
document.getElementsByClassName(elem.title)[0].style.display = "block";
return false;
}
.item1,
.item2,
.item3 {
display: none;
}
<input id="f_000000001845521" name="id12" value="This field is set automatically, based on chosen element from the list below." />
<div class="help">
<script type="text/JavaScript">
document.getElementById("f_000000001845521").readOnly = true;
</script>
</div>
<!-- automatically visible -->
<!-- Checkbox im Status checked -->
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:
<!-- Modal / Pop Up Fenster -->
<div id="mymodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- List items as links to make them clickable -->
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="#" onclick="showitem(this);">Item 1</a></li>
<li><a id="li2" title="item2" href="#" onclick="showitem(this);">Item 2</a></li>
<li><a id="li3" title="item3" href="#" onclick="showitem(this);">Item 3</a></li>
</font>
</ul>
</div>
</div>
<fieldset class="item item1">
<legend>Item 1 Selections</legend>
<div id="d_000000001845952" class="field text">
<label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text ">
<label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" />
</div>
</fieldset>
<fieldset class="item item2">
<legend>Item 2 Selections</legend>
<div id="d_000000001845952" class="field text">
<label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text ">
<label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" />
</div>
</fieldset>
<fieldset class="item item3">
<legend>Item 3 Selections</legend>
<div id="d_000000001845952" class="field text">
<label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text ">
<label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" />
</div>
</fieldset>

document.getElementById("f_000000001845521").readOnly = true;
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementById("mymodal").style.display = "block";
} else {
document.getElementById("mymodal").style.display = "none";
}
}
toggleBoxVisibility();
function returncontent(elem) {
if(elem)
document.getElementById("f_000000001845521").value = elem.title;
document.getElementById("mymodal").style.display = "none";
document.getElementById("check").checked = false;
}
returncontent();
function showitem1() {
document.getElementsByClassName("item1")[0].style.display = "block";
}
.item1 {
display: none;
}
<input id="f_000000001845521" name="id12" value="This field is set automatically, based on chosen element from the list below." />
<div class="help">
<script type="text/JavaScript">
document.getElementById("f_000000001845521").readOnly = true;
</script>
</div>
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:
<div id="mymodal" class="modal">
<div class="modal-content">
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="javascript:void(0)" onclick="returncontent(this);showitem1();">Item 1</a></li>
<li><a id="li2" title="item2" href="javascript:void(0)" onclick="returncontent(this);showitem2();">Item 2</a></li>
<li><a id="li3" title="item3" href="javascript:void(0)" onclick="returncontent(this);showitem3();">Item 3</a></li>
</font>
</ul>
</div>
</div>
<fieldset class="item1">
<legend>Item 1 Selections</legend>
<div id="d_000000001845952" class="field text"><label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text "><label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" /></div>
</fieldset>

Office Fabric UI how to check choicefieldgroup radiobutton (javascript/jquery)

I'm developing an OfficeApp with JavaScript and jQuery and it's almost complete, except for one function that does not do what it should do.
I have this html for the choicefieldgroup:
<div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
<div class="ms-ChoiceFieldGroup-title">
<label class="ms-Label" id="lblSelectType">Select type:</label>
</div>
<ul class="ms-ChoiceFieldGroup-list">
<li class="ms-RadioButton">
<input tabindex="-1" type="radio" class="ms-RadioButton-input" id="radio1-amount" value="amount">
<label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
<span class="ms-Label" id="lblAmount">Amount</span>
</label>
</li>
<li class="ms-RadioButton">
<input tabindex="-1" type="radio" class="ms-RadioButton-input" id="radio1-datetime" value="datetime">
<label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
<span class="ms-Label" id="lblDateTime">Date / time</span>
</label>
</li>
<li class="ms-RadioButton">
<input tabindex="-1" type="radio" class="ms-RadioButton-input" id="radio1-year" value="year">
<label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup" id="testjaar">
<span class="ms-Label" id="lblYear">Year</span>
</label>
</li>
</ul>
</div>
In javascript I do the following:
Office.initialize = function (reason) {
$(document).ready(function () {
**$('input[id=radio1-year]').attr('checked', true);**
var ChoiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
for (var i = 0; i < ChoiceFieldGroupElements.length; i++) {
new fabric['ChoiceFieldGroup'](ChoiceFieldGroupElements[i]);
}
});
};
With the bold line the option should be checked. If I check in code, the option is checked, but it is not shown in the UI. What am I doing wrong. Or must I add something extra?
Instead of the bold line I have also used the following (all with the same result):
$('#radio1-year').prop('checked', true);

I think the label is what controls the UI.
Try $('#radio1-year').siblings('label').attr('aria-checked',true);

Show text dropdown button with JavaScript in Laravel

I want to show my text in dropdown radio button like this:
but, my radio button error and nothing happen in my dropdown radio button:
How can I achieve this dropdown radio button? This is my code in view
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="dropdown dropdown-full-width dropdown-category">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="name">
<span id="category-select">Choose Category</span>
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu row">
<div class="col-md-4">
<li><strong>By {{ $category[1] }}</strong></li>
#foreach($category1 as $occasions)
<li>
<div class="checkbox">
<label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions->id }}"> {{ $occasions->name }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[2] }}</strong></li>
#foreach($category2 as $types)
<li>
<div class="checkbox">
<label><input type="radio" name="category['types']" class="category-radio" value="{{ $types->id }}"> {{ $types->name }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[3] }}</strong></li>
#foreach($category3 as $flowers)
<li>
<div class="checkbox">
<label><input type="radio" name="category['flowers']" class="category-radio" value="{{ $flowers->id }}"> {{ $flowers->name }}</label>
</div>
</li>
#endforeach
</div>
</div>
</div>
<script type="text/javascript">
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').text() || '';
var category_types = $('input[name="category[\'types\']"]:checked').text() || '';
var category_flowers =$('input[name="category[\'flowers\']"]:checked').text() || '';
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
});
</script>

Your issue is really with Javascript/JQuery and you can simplify your problem to that.
In this case, you are requesting the text() of the checkbox, but in fact, it's the label that holds the value you are after:
var category_occasions = $('input[name="category[\'occasions\']"]:checked').parent().text() || '';
And an example:
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').parent().text().trim() || '';
var category_types = $('input[name="category[\'types\']"]:checked').parent().text().trim() || '';
var category_flowers = $('input[name="category[\'flowers\']"]:checked').parent().text().trim() || '';
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
console.log(output);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<label>
<input type="radio" name="category['occasions']" class="category-radio" value="birthday" />
Birthday</label>
<label>
<input type="radio" name="category['types']" class="category-radio" value="birthday" />
Bouqet</label>
<label>
<input type="radio" name="category['flowers']" class="category-radio" value="birthday" />
Daisies</label>
</li>
</ul>

You have to use Jquery parent() or closest('label') to select your element and you can easily get text with text().
Look at the snippet down.
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').parent().text();
var category_types = $('input[name="category[\'types\']"]:checked').parent().text();
var category_flowers = $('input[name="category[\'flowers\']"]:checked').parent().text();
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="dropdown dropdown-full-width dropdown-category">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="name">
<span id="category-select">Choose Category</span>
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu row">
<div class="col-md-4">
<li><strong>By Occasions</strong></li>
<li>
<div class="checkbox">
<label><input type="radio" name="category['occasions']" class="category-radio" value="0">Anniversaries</label>
<label><input type="radio" name="category['occasions']" class="category-radio" value="1">Birthdays</label>
</div>
</li>
</div>
<div class="col-md-4">
<li><strong>By Types</strong></li>
<li>
<div class="checkbox">
<label><input type="radio" name="category['types']" class="category-radio" value="0">Baskets</label>
<label><input type="radio" name="category['types']" class="category-radio" value="0">Hampers</label>
</div>
</li>
</div>
<div class="col-md-4">
<li><strong>By Flowers</strong></li>
<li>
<div class="checkbox">
<label><input type="radio" name="category['flowers']" class="category-radio" value="0">Roses</label>
<label><input type="radio" name="category['flowers']" class="category-radio" value="0">Tulips</label>
</div>
</li>
</div>
</div>
</div>

Need to double-click on the checkbox to check

I have problem, my code does not accept one cliques. It is necessary to click twice to put a tick.
If you click on the checkbox once, the tick does not appear, but if you click the "Save" button, after the page is reloaded, the tick is on this checkbox.
JS
<script type="text/javascript">
var options = [];
$('.dropdown-menu a').on('click', function (event) {
// This was your original function which sets the checkbox as checked or unchecked, and draws the check mark
var $target = $(event.currentTarget),
val = $target.attr('data-value'),
$inp = $target.find('input[type="checkbox"]'),
idx;
if ((idx = options.indexOf(val)) > -1) {
options.splice(idx, 1);
setTimeout(function () { $inp.prop('checked', false) }, 0);
} else {
options.push(val);
setTimeout(function () { $inp.prop('checked', true) }, 0);
}
$(event.target).blur();
// This code is used to set the selection[] hidden input to true when the checkbox is checked
// and to false when the check mark is cleared
$tap = $target.find('input[name*="selection"]');
if ($inp.prop("checked")) {
$tap.val('true');
} else {
$tap.val('false');
}
return false;
});
var length = $('.dropdown-menu > option').length;
var cb = $('.dropdown-menu input[type=checkbox]:checked'); // Selected chechboxes
var cnt = $('.CompNameBox'); // Container where to output text
if (cb.length === 1)
cnt.text(cb.parent().text());
else if (cb.length > 1)
cnt.text('Selected ' + cb.length + ' companies');
else if (cb.length === 0)
cnt.text('Nothing selected');
HTML
<div>
<div class="row">
<div class="col-md-1">
<div class="btn-group" >
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" style="width: 180px"> <span class="CompNameBox"></span> <span class="caret"></span></button>
<ul class="dropdown-menu" style="width: 180px">
#if (Model.AvailableCompanies != null)
{
for (int i = 0; i < Model.AvailableCompanies.Count; i++)
{
if (Model.Companies.Contains(Model.AvailableCompanies[i], new CompanyViewModelComparer()))
{
<li>
<a href="#" class="small" data-value="option1" tabIndex="-1">
<input type="checkbox" checked /> #Html.DisplayTextFor(model => Model.AvailableCompanies[i].NAME)
<input type="hidden" name="selection[#i]" value="true"/>
<input type="hidden" name="ids[#i]" value="#Model.AvailableCompanies[i].ID" />
</a>
</li>
}
else
{
<li>
<a href="#" class="small" data-value="option1" tabIndex="-1">
<input type="checkbox" /> #Html.DisplayTextFor(model => Model.AvailableCompanies[i].NAME)
<input type="hidden" name="selection[#i]" value="false" />
<input type="hidden" name="ids[#i]" value="#Model.AvailableCompanies[i].ID" />
</a>
</li>
}
}
}
</ul>
</div>
</div>
</div>
</div>
HTML from Chrome
<div class="row">
<div class="col-md-1">
<div class="btn-group open">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" style="width: 180px" aria-expanded="true"> <span class="CompNameBox">Selected 2 companies</span> <span class="caret"></span></button>
<ul class="dropdown-menu" style="width: 180px">
<li>
<a href="#" class="small" data-value="option1" tabindex="-1">
<input type="checkbox" checked=""> TOro
<input type="hidden" name="selection[0]" value="true">
<input type="hidden" name="ids[0]" value="1">
</a>
</li>
<li>
<a href="#" class="small" data-value="option1" tabindex="-1">
<input type="checkbox"> My Comp
<input type="hidden" name="selection[1]" value="false">
<input type="hidden" name="ids[1]" value="2">
</a>
</li>
<li>
<a href="#" class="small" data-value="option1" tabindex="-1">
<input type="checkbox" checked=""> France
<input type="hidden" name="selection[2]" value="true">
<input type="hidden" name="ids[2]" value="3">
</a>
</li>
<li>
<a href="#" class="small" data-value="option1" tabindex="-1">
<input type="checkbox"> Germany Corp
<input type="hidden" name="selection[3]" value="false">
<input type="hidden" name="ids[3]" value="4">
</a>
</li>
</ul>
</div>
</div>
</div>

I think the problem occurs in var options = [], there is no value when initializing, but some input tags in your html code are already checked. So when you click the first time, js function can't take this tag from options. Remove from collection. Please modify the initialization method of options collection.

How to loop through the textboxes in JavaScript

I am trying to make an a form with textboxes. when I check the checkboxes a text box will appear and I can input values. when I click the submit button it should give an alert showing only the values which I have entered.
How to use a loop for this content?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap - Prebuilt Layout</title>
<!-- Bootstrap -->
<link href="../../../css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="../../../js/bootstrap.min.js"></script>
<script src="../../../js/jquery-1.11.2.min.js"></script>
<script src="../../../js/collapse.js"></script>
</head>
<body>
<div class="container">
<script>
var i;
var j;
</script>
<button type="button" class="btn btn-info" data-toggle="collapse"
data-target="#demo1">Item 1</button>
<div id="demo1" class="collapse ">
<div class="checkbox">
<label data-toggle="collapse" data-target="#collapseOne">
<input type="checkbox" id="check1"/> Option 1
</label>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="driving-license-kind">
<div style="padding:16px">
No. of people : <input type="text" id="textbox1"></input>
</div>
</div>
</div>
</div>
<div class="checkbox" j="2">
<label data-toggle="collapse" data-target="#collapseTwo">
<input type="checkbox" id="check2"/> Option 2
</label>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="driving-license-kind">
<div style="padding:16px">
No. of people : <input type="text" id="textbox2"></input>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-info" data-toggle="collapse"
data-target="#demo2" i="2">Item 2</button>
<div id="demo2" class="collapse in">
<div class="checkbox" j="1">
<label data-toggle="collapse" data-target="#collapseThree">
<input type="checkbox" id="check3"/> Option 1
</label>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="driving-license-kind">
<div style="padding:16px">
No. of people : <input type="text" id="textbox3" ></input>
</div>
</div>
</div>
</div>
<div class="checkbox" j="2">
<label data-toggle="collapse" data-target="#collapseFour">
<input type="checkbox" id="check4"/> Option 2
</label>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="driving-license-kind">
<div style="padding:16px">
No. of people : <input type="text" id="textbox4"></input>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="button" value="submit" onclick="myFunction();"/>
<script>
function myFunction() {
for(
if (document.getElementById("check1").checked){
var x = document.getElementById("textbox1");
var content= "Item 1 Option 1: "+ x.value;
document.write(content);
}
if (document.getElementById("check2").checked){
var y = document.getElementById("textbox2");
var content= "Item 1 Option 2: "+ y.value;
document.write(content);
}
if (document.getElementById("check3").checked){
var z = document.getElementById("textbox3");
var content= "Item 2 Option 1: "+ z.value;
document.write(content);
}
if (document.getElementById("check4").checked){
var w = document.getElementById("textbox4");
var content= "Item 2 Option 2 : "+ w.value;
document.write(content);
}
}
</script>
</body>
</html>

If your html looks like this, and you do not have other <input type="text"> tags on your form:
<input type="checkbox" id="check1" value="text1" onclick='showHide(this);' /><input type="text" id="text1" style="display:none"/> <br>
<input type="checkbox" id="check2" value="text2" onclick='showHide(this);'/><input type="text" id="text2" style="display:none"/> <br>
<input type="checkbox" id="check3" value="text3" onclick='showHide(this);'/><input type="text" id="text3" style="display:none"/> <br>
<input type="checkbox" id="check4" value="text4" onclick='showHide(this);'/><input type="text" id="text4" style="display:none"/> <br>
<input type="button" onclick='alertChecked()' value='alert checked'/>
Then you can use javascript solution:
function showHide(source){
var textBox = document.getElementById(source.value);
if (isHidden(textBox)){
textBox.style.display = 'inline';
}
else{
textBox.style.display = 'none';
}
}
function alertChecked(){
var text = '';
var inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
if (inputs[index].type == 'text' && isHidden(inputs[index]) === false){
text += inputs[index].value;
}
}
alert(text);
}
function isHidden(el) {
return (el.offsetParent === null)
}
Demo fiddle: http://jsfiddle.net/ggcse3zz/1/
Or jQuery solution:
function showHide(source){
$('#'+source.value).toggle();
}
function alertChecked(){
var text = '';
$('input[type=text]:visible').each(function(){
text += $(this).val();
});
alert(text);
}
Demo fiddle: http://jsfiddle.net/ggcse3zz/
EDIT based on added HTML in question
Based on your html, you can use array of ids to find all yours input tags and loop them:
function myFunction(){
var text = '';
var textboxes = ["textbox1", "textbox2", "textbox3", "textbox4"];
for (index = 0; index < textboxes.length; ++index) {
var input = document.getElementById(textboxes[index]);
if (isHidden(input) === false){
text += input.value;
}
}
alert(text);
}
function isHidden(el) {
return (el.offsetParent === null)
}
Note that this javascript relies on the visibility of the input tag, not if checkbox is checked or not.
Demo fiddle: http://jsfiddle.net/usvLe3r1/

You should enhance myFunction() method:
function myFunction() {
var $checkboxes = $("input[id*='check']");
for (i = 0; i <= $checkboxes.length; i++) {
if ($checkboxes.get(i).checked) {
var orderNo = i + 1;
var content= "Item " + orderNo + " Option " + orderNo + ": "+ $("#textbox"+ orderNo).val();
alert(content);
}
}
}
I hope it's help.