We Keep Coding

Can I add checkbox in iframe in HTML

I have list of checkbox which are loaded dynamically. These checkboxes are around 2000 CheckBox. Once they are loaded, the web page becomevery long and the shape is not good. I want to add these check box in frame so only frame will be extended and the size of the page will be the same. Any idea how to do so.
I tried to use iframe but what I see is that it can handle only either another web page or some document.

An <iframe> or <frame> is not needed. You can use CSS to do you what you are after.
Sample below should be easy to adapt to your needs.
.div-that-scrolls {
height:120px;
overflow-y:auto;
line-height:32px;
}
<div>
List of checkboxes<br />
<div class="div-that-scrolls">
<input type="checkbox" id="i1" name="i1" /><label for="i1">Item 1</label><br />
<input type="checkbox" id="i2" name="i2" /><label for="i2">Item 2</label><br />
<input type="checkbox" id="i3" name="i3" /><label for="i3">Item 3</label><br />
<input type="checkbox" id="i4" name="i4" /><label for="i4">Item 4</label><br />
<input type="checkbox" id="i5" name="i5" /><label for="i5">Item 5</label><br />
<input type="checkbox" id="i6" name="i6" /><label for="i6">Item 6</label><br />
<input type="checkbox" id="i7" name="i7" /><label for="i7">Item 7</label><br />
<input type="checkbox" id="i8" name="i8" /><label for="i8">Item 8</label><br />
<input type="checkbox" id="i9" name="i9" /><label for="i9">Item 9</label><br />
<input type="checkbox" id="i10" name="i10" /><label for="i10">Item 10</label><br />
<input type="checkbox" id="i11" name="i11" /><label for="i11">Item 11</label><br />
<input type="checkbox" id="i12" name="i12" /><label for="i12">Item 12</label><br />
<input type="checkbox" id="i13" name="i13" /><label for="i13">Item 13</label><br />
<input type="checkbox" id="i14" name="i14" /><label for="i14">Item 14</label><br />
<input type="checkbox" id="i15" name="i15" /><label for="i15">Item 15</label><br />
<input type="checkbox" id="i16" name="i16" /><label for="i16">Item 16</label><br />
<input type="checkbox" id="i17" name="i17" /><label for="i17">Item 17</label><br />
<input type="checkbox" id="i18" name="i18" /><label for="i18">Item 18</label><br />
<input type="checkbox" id="i19" name="i19" /><label for="i19">Item 19</label><br />
<input type="checkbox" id="i20" name="i10" /><label for="i10">Item 10</label><br />
<input type="checkbox" id="i21" name="i21" /><label for="i21">Item 21</label><br />
<input type="checkbox" id="i22" name="i22" /><label for="i22">Item 22</label><br />
</div>
<p>
Something after the checkboxes
</p>
</div>

update image with jquery based on multiple radio button inputs

An image is being rendered based on multiple attributes.
The name of the image reflects attribute values (for names a, b, & c).
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>
when a user clicks a radio button (say b_4), the checked input element needs to change and a new image needs to render as
<img src="142_small.jpg" data-zoom-image="142_big.jpg" id="rendered_choice">
How can this be accomplished with jQuery, where the file name takes into account all other checked values in addition to the user inputted value?

Just get the value of each checked checkbox, in order, after making an array with $.makeArray:
$("input[type='radio']").on("change", function() {
const num = $.makeArray($("input:checked")).map(({ value }) => value).join("");
$("#rendered_choice").attr("src", num + "_small.jpg").data("zoom-image", num + "_big.jpg");
});

You can get value of each checked checkbox and change the img src when input checked change.
Demo:
$("input[type=radio]").on("change", function() {
var index = $("input[name=a]:checked").val() + $("input[name=b]:checked").val() + $("input[name=c]:checked").val();
$("#rendered_choice").attr("src", index + "_small.jpg");
$("#rendered_choice").attr("data-zoom-image", index + "_big.jpg");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>

jQuery multi-step form: disable next button when fields unchecked

I have a multi-step form that has a "next" and "back" button on each step of the form. I'm using jQuery to enable the "next" button once the criteria for each section is met. For example: at least one checkbox is checked or a radio button is selected.
I'm having an issue where after completing a number of sections, I go back to a previous section and uncheck all checkboxes and the "next" button remains enabled.
There's a Codepen here of a rough version of what I'm working with - note all sections are visible to show how the button remains enabled once you begin checking/unchecking: https://codepen.io/abbasarezoo/pen/jZgQOV
My current code:
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>
JS:
var $panelsInput = $('.panels input'),
$rowsInput = $('.rows input');
$panelsInput.click(function () {
if ($('.panels input:checked').length >= 1) {
$(this).closest('.panels').find('.next-q').prop('disabled', false);
}
else {
$(this).closest('.panels').find('.next-q').prop('disabled', true);
}
});
$rowsInput.click(function () {
var radioLength = $('.radio-row').length;
if ($('.rows input:checked').length == radioLength) {
$('.rows .next-q').prop('disabled', false);
}
else {
$('.rows .next-q').prop('disabled', true);
}
});
Is there any way to make this work?

when you select the input to see if is checked, you're selecting all inputs
if ($('.panels input:checked').length >= 1) {
you need to select just the inputs from the panel the user clicked
if ($(this).closest('.panels').find('input:checked').length >= 1) {
https://codepen.io/spacedog4/pen/YaWqdo?editors=1010

Please see below comment in $panelsInput.click(function (){});, you need to get the checked count for current panel (the user clicks), instead of all.
So the comparasion in your codes:
$('.panels input:checked').length >= 1
need to change to:
$(this).parent().find('input:checked').length >= 1
var $panelsInput = $('.panels input'),
$rowsInput = $('.rows input');
$panelsInput.click(function () {
//get current input, find out its parent, then get the count of checked
if ($(this).parent().find('input:checked').length >= 1) {
$(this).closest('.panels').find('.next-q').prop('disabled', false);
}
else {
$(this).closest('.panels').find('.next-q').prop('disabled', true);
}
});
$rowsInput.click(function () {
var radioLength = $('.radio-row').length;
if ($('.rows input:checked').length == radioLength) {
$('.rows .next-q').prop('disabled', false);
}
else {
$('.rows .next-q').prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>

I thought it is interesting to handle interactions using event delegation at the form level which is more flexible:
Only one handler is loaded in memory. (By the way only a single scope is in charge of the logic behind the prev/next behavior).
You can add dynamically panels to the form (with the same markup structure) and buttons will work right away without requiring another listener registering step.
var $panelsInput = $('.panels input')
, $rowsInput = $('.rows input')
;
$('form').on('click', function (e) {
let $t = $(this)
, $target = $(e.target)
, $fieldset = $target.closest('fieldset')
, $rows = $fieldset.find('.radio-row')
;
// When a button is clicked
if ($target.is('button')) {
// Next button
if ($target.is('.next-q')) {
$fieldset.addClass('hide').next().addClass('show');
// Prev button
} else {
// Untick boxes
$fieldset.find('input').prop('checked', false).end()
// Disable appropriate button
.find('.next-q').prop('disabled', true).end()
.prev().removeClass('hide').nextAll().removeClass('show');
}
// When a checkbox is clicked
} else if ($target.is('input')) {
let $containers = ($rows.length ? $rows : $fieldset)
, containersHavingAtickedBox = $containers.filter(function() {
return !!$(this).find('input:checked').length
})
, shouldEnable = $containers.length === containersHavingAtickedBox.length
;
$fieldset.find('.next-q').prop('disabled', !shouldEnable);
}
});
fieldset ~ fieldset, .hide{display:none}
fieldset.show:not(.hide){display: block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>

Checkbox(javascript) selection, first item showing undefined?

I am trying to select and return some items(checkbox). Everything is okay, but the first item is always showing UNDEFINED. can't fix this problem!
My code is as below
function checkList () {
var checked;
var i;
for( i = 0; i < document.form1.length; i++) {
var element = document.form1[i]
if (element.type == "checkbox"){
if (element.checked == true){
checked = checked + element.value + "<br/>";
}
}
}
document.getElementById('checked').innerHTML = checked;
}
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" >Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>

Try to Change
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" for="checkbox">Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
to This....
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2">Book</label>
<br/>
<input type="checkbox" name="checkbox3" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox4" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
You have multiple duplications within the code such as (for="")
Let me know, Thanks

Change
var checked; // like this, checked is undefined
to
var checked = ""; // now it's simply empty
here's a fiddle
http://jsfiddle.net/sq9938b0/

The issue is that you initialize checked variable as undefined. When you append the string to undefined it is converted to string "undefined", hence it appearing at the beginning.
Just initialize it as an empty string: var checked = "";
function checkList () {
var checked = "";
var i;
for( i = 0; i < document.form1.length; i++) {
var element = document.form1[i]
if (element.type == "checkbox"){
if (element.checked == true){
checked = checked + element.value + "<br/>";
}
}
}
document.getElementById('checked').innerHTML = checked;
}
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" for="checkbox">Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>

Take a look of the following step
checked = checked + element.value + "";
In the first loop you have not defined checked. So first time it is
checked = undefined + pen
Intialize
var checked = ''

jQuery radio subcategory uncheck on parent button change

I have a form that finds lost and found items.
<input type="radio" name="subcatitemlost" value="subDiv1" />Luggage
<div id="subDiv1" class="desc">
<label>
<input type="radio" name="subluggage" id="truck" value="t" />
</label>Trunk</br>
<label>
<input type="radio" name="subluggage" id="chest" value="chest" />
</label>Chest</br>
<label>
<input type="radio" name="subluggage" id="suitcase" value="suitcase" />
</label>Suitcase</br>
<label>
<input type="radio" name="subluggage" id="duffelbag" value="duffelbag" />
</label>Duffelbag</br>
<label>
<input type="radio" name="subluggage" id="tote" value="tote" />
</label>Tote</br>
</div>
<br />
<input type="radio" name="subcatitemlost" value="subDiv2" />Clothing
<div id="subDiv2" class="desc">
<input type="radio" name="subclothing" id="shirt" value="shirt" />
</label>Shirt</br>
<input type="radio" name="subclothing" id="shoes" value="shoes" />
</label>Shoes</br>
<input type="radio" name="subclothing" id="pants" value="pants" />
</label>Pants</br>
<input type="radio" name="subclothing" id="jacket" value="jacket" />
</label>Jacket</br>
<input type="radio" name="subclothing" id="suit" value="suit" />
</label>Suit</br>
<input type="radio" name="subclothing" id="hat" value="hat" />
</label>Hat</br>
</div>
<br />
The main categories will unselect themselves upon selection of another main category , however , the subcategories will remain selected and I cannot figure how to control that.I am looking for the script that doesn't allow another subcategory to be selected when the correct button is selected.
$(document).ready(function () {
$("div.desc").hide();
$("input[name$='subcatitemlost']").click(function () {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});

Try using this
$(document).ready(function() {
$("div.desc").hide();
$("input[name$='subcatitemlost']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
$("div input:radio").attr('checked', false);
});
});
http://jsfiddle.net/dbtA4/