JavaScript: form selector not working - javascript

Contrary to the question title, the code is working; albeit not entirely as intended.
If one checkbox is ticked, its partner with the same value should also be ticked. Alternately, if one of the checkboxes is unticked, its parter should be unticked as well. This works correctly once. Repeat checking/unchecking only triggers if both checkboxes are checked or unchecked.
alert("hi!");
$(".checkstylin").change(function() {
var val = $(this).val();
if ($(this).is(":checked")) {
$(":checkbox[value='" + val + "']").attr("checked", true);
} else {
$(":checkbox[value='" + val + "']").attr("checked", false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="9">
<td>9.00</td>
<td style="background-color:#FFCCCC">
<input class="checkstylin" name="1" title="B106" type="checkbox" value="MOD10110">MOD10110</td>
<td style="background-color:#">
<input class="checkstylin" name="9" title="B103" type="checkbox" value="MOD30010">MOD30010</td>
</tr>
<tr id="10">
<td>10.00</td>
<td style="background-color:#FFCCCC">
<input class="checkstylin" name="1" title="B106" type="checkbox" value="MOD10110">MOD10110</td>
<td>High</td>
</tr>
<tr id="11">
<td>11.00</td>
<td style="background-color:#">
<input class="checkstylin" name="10" title="B103" type="checkbox" value="MOD30060">MOD30060</td>
<td>High</td>
</tr>
<tr id="12">
<td>12.00</td>
<td>High</td>
<td>Low</td>
</tr>
<tr id="13">
<td>13.00</td>
<td>High</td>
<td>Low</td>
</tr>
<tr id="14">
<td>14.00</td>
<td>High</td>
<td>Low</td>
</tr>
<tr id="15">
<td>15.00</td>
<td>High</td>
<td>Low</td>
</tr>
<tr id="16">
<td>16.00</td>
<td>High</td>
<td>Low</td>
</tr>
<tr id="17">
<td>17.00</td>
<td>High</td>
<td>Low</td>
</tr>
<tr id="18">
<td>18.00</td>
<td>High</td>
<td>Low</td>
</tr>
</table>
<input type="submit" value="submit">
</form>
</div>


Use prop()
As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
See: http://api.jquery.com/prop/
alert("hi!");
$(".checkstylin").on('change',function() {
var val = $(this).val();
if ($(this).is(":checked")) {
$(":checkbox[value='" + val + "']").prop("checked", true);
} else {
$(":checkbox[value='" + val + "']").prop("checked", false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="9">
<td>9.00</td>
<td style="background-color:#FFCCCC">
<input class="checkstylin" name="1" title="B106" type="checkbox" value="MOD10110">MOD10110</td>
<td style="background-color:#">
<input class="checkstylin" name="9" title="B103" type="checkbox" value="MOD30010">MOD30010</td>
</tr>
<tr id="10">
<td>10.00</td>
<td style="background-color:#FFCCCC">
<input class="checkstylin" name="1" title="B106" type="checkbox" value="MOD10110">MOD10110</td>
<td>High</td>
</tr>
<tr id="11">
<td>11.00</td>
<td style="background-color:#">
<input class="checkstylin" name="10" title="B103" type="checkbox" value="MOD30060">MOD30060</td>
<td>High</td>
</tr>
<tr id="12">
<td>12.00</td>
<td>High</td>
<td>Low</td>
</tr>
<tr id="13">
<td>13.00</td>
<td>High</td>
<td>Low</td>
</tr>
<tr id="14">
<td>14.00</td>
<td>High</td>
<td>Low</td>
</tr>
<tr id="15">
<td>15.00</td>
<td>High</td>
<td>Low</td>
</tr>
<tr id="16">
<td>16.00</td>
<td>High</td>
<td>Low</td>
</tr>
<tr id="17">
<td>17.00</td>
<td>High</td>
<td>Low</td>
</tr>
<tr id="18">
<td>18.00</td>
<td>High</td>
<td>Low</td>
</tr>
</table>
<input type="submit" value="submit">
</form>
</div>

Related

Jquery: Select all check boxes when 'select all' is checked

I have a form that prints a out menu items from each category. I want to have a select all checkbox over each category such that when clicked, all checkboxes of that category are selected.
Issue: Sometimes some check boxes are not checked by default e.g. no data in database - in that case the select all checkbox should not be checked when page is rendered (it should only checked if all its child check boxes are checked).
Current partial implementation (checked is true for select all even if some of its some menu items are not checked?!):
checked = true;
$(".all").click(function() {
checked = !checked;
var selectid = this.id.replace(/ /g, '');
console.log("====>>>" + selectid);
var item = `${selectid}-item`;
console.log("===<<<" + item)
var checkElements = $(`.${selectid}-item`).prop('checked', checked);
$(selectid + "-item").prop('checked', !checked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Cats</th>
<th colspan='2'>Available</th>
<th colspan='2'><input id="Cats" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Cat 1</td>
<td colspan='2'><input name="Cats,cat1" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 2</td>
<td colspan='2'><input name="Cats,cat2" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 3</td>
<td colspan='2'><input name="Cats,cat3" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Dogs</th>
<th colspan='2'>Available</th>
<th colspan='2'><input id="Dog Big" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Dog 1</td>
<td colspan='2'><input name="Dogs,dogs1" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 2</td>
<td colspan='2'><input name="Dogs,dogs2" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 3</td>
<td colspan='2'><input name="Dogs,dogs3" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>

I had to normalise your classes. They were not consistent. Don't have spaces in IDs (I got rid of the ID from all)
and do not have spaces between classNames that mean something when taken together
const checkAll = () => {
$(".all").each(function() {
const subClass = $(this).data("class");
const $sub = $("." + subClass+"-item");
$(this).prop("checked", $sub.length === $sub.filter(":checked").length)
})
};
$(function() {
checkAll(); //on load
$(".all").on("click", function() {
const $sub = $("." + $(this).data("class")+"-item");
const checked = this.checked;
$sub.prop('checked', checked);
})
$(".item").on("click", checkAll)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Cats</th>
<th colspan='2'>Available</th>
<th colspan='2'><input data-class="Cat" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Cat 1</td>
<td colspan='2'><input name="Cats,cat1" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 2</td>
<td colspan='2'><input name="Cats,cat2" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 3</td>
<td colspan='2'><input name="Cats,cat3" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Dogs</th>
<th colspan='2'>Available</th>
<th colspan='2'><input data-class="Dog_Big" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Dog 1</td>
<td colspan='2'><input name="Dogs,dogs1" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 2</td>
<td colspan='2'><input name="Dogs,dogs2" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 3</td>
<td colspan='2'><input name="Dogs,dogs3" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>

how to expand the table row on click of check box?

Onclick of the checkbox I want to expand the table row and and ask for additional information using labels and input tag.But this coming in the straight line and I want this in the new line.
below is the example.
function serverVn(obj) {
document.getElementById(obj.id + "expand").innerHTML = "<div id='Vn'><label>VNumber:</label><input id='INVn' class='form-control' type='text'/></div>"
}
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>firstname</th>
<th>lastname</th>
<th>dOB</th>
<th>age</th>
<th>gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id='use0' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<td></td>
<br/>
<td>
<div id='use0expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use1' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<td></td>
<br/>
<td>
<div id='use1expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use2' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td></td>
<td></td>
<td></td>
<td>30</td>
<td></td>
<br/>
<td>
<div id='use2expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use3' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<br/>
<td>
<div id='use3expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use4' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<br/>
<td>
<div id='use4expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use5' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<br/>
<td>
<div id='use5expand'></div>
</td>
</tr>
</tbody>
</table>

JS is case sensitive.
Your is invalid HTML
use jQuery now you have it
Put xxxexpand in a new ROW / cell instead of a cell in the same row
Add the obj id to the input too to make unique IDs
I removed the div since you already have a cell you can use
I also remove the new row when unchecked
$(function() {
$(".sVN").on("click", function() {
$("#" + this.id + "expand").html(this.checked ? "<label for='INVn" + this.id + "' >VNumber:</label><input id='INVn" + this.id + "' class='form-control' type='text'/>" : "");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>firstname</th>
<th>lastname</th>
<th>dOB</th>
<th>age</th>
<th>gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id='use0' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use0expand'></td>
</tr>
<tr>
<td>
<input id='use1' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use1expand'></td>
</tr>
<tr>
<td>
<input id='use2' type='checkbox' name='chkbox' class="sVN" />
</td>
<td> </td>
<td> </td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use2expand'></td>
</tr>
<tr>
<td>
<input id='use3' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use3expand'></td>
</tr>
<tr>
<td>
<input id='use4' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use4expand'></td>
</tr>
<tr>
<td>
<input id='use5' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use5expand'></td>
</tr>
</tbody>
</table>

Select first 5 checkbox from a table by clicking on a button

I have a table that looks like this:
<table id="start" class="appplytblclr">
<tr class="heading">
<td>First coumn</td>
<td>second column</td>
<td>3rd column</td>
<td>4th column</td>
<tr>
<tr id='1'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
<tr id='2'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
<tr id='3'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
<tr id='4'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
<tr id='5'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
<tr id='6'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
<tr id='7'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
</tr>
</table>
I have a button that, on click, should select the first five check boxes. This is what I've tried so far:
$('#clickbtn').on('click', function (e) {
var sList = "";
$('input[type=checkbox]').each(function () {
sList += $(this).val() + ",";
});
var comma = sList.split(",", 5);
});
but it doesn't seem to work. How should I approach this problem?

You can use :lt() selector:
$("#selectFirstFive").on("click", function() {
var checkBoxes = $("#start tr td :checkbox:lt(5)");//using :lt get first 5 checkboxes
$(checkBoxes).prop("checked", !checkBoxes.prop("checked"));//change checkbox status based on check/uncheck
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="start" class="appplytblclr">
<tr class="heading">
<td>First coumn</td>
<td>second column</td>
<td>3rd column</td>
<td>4th column</td>
<tr>
<tr id='1'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
<tr id='2'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
<tr id='3'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
<tr id='4'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
<tr id='5'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
<tr id='6'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
<tr id='7'>
<td>
<input type="checkbox" offval="no" value=" ">
</td>
<td>s</td>
<td>t</td>
<td>f</td>
</tr>
</table>
<input type="button" id="selectFirstFive" value="select" />

You can use lt for this (don't forget about the :checkbox selector too):
$(":checkbox:lt(5)")
Or if performance is your worry (and you're working with large lists), you can use the much more efficient JavaScript's slice for this:
$(':checkbox').slice(0, 5)

JQuery TableSorter click actions have no effect

I must be doing something stupidly wrong, but I'm not seeing it. On my site, I attach the JQuery TableSorter to a table and hope to have some sorting done, but clicks have no effect. No sorting happens. It just remains as a static table.
Here's a simplified JSFiddle of the problem I'm having:
http://jsfiddle.net/96AEE/3/
It's a very simple table with javascript as follows:
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<td>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</td>
<td>Gift Cert</td>
<td>Note</td>
<td>Order #</td>
<td>Order Date</td>
<td>Amount</td>
<td>Redeemed</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="103" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_103" name="check_103" />
</td>
<td>443ss</td>
<td>(1d10t) Arizona Tea</td>
<td>-</td>
<td>-</td>
<td>$50.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="50" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_50" name="check_50" />
</td>
<td>199e</td>
<td>(#9000) Over</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$(".tablesorter").tablesorter();
});
Is there something obvious I'm missing?

This is due to your markup on the HTML table.
Within the thead element, you need to use th tags instead of td.
<thead>
<tr>
<th></th>
...
</tr>
</thead>
Working JSfiddle:
http://jsfiddle.net/bybFK/

Try changing your header row to use <th> tags instead of <td> tags.

You are definitely neglecting something, when creating the header of your table; your are using <td> instead of using <th>
you also do not need to assign the class tablesorter to your table
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<th>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</th>
<th>Gift Cert</th>
<th>Note</th>
<th>Order #</th>
<th>Order Date</th>
<th>Amount</th>
<th>Redeemed</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$("#gift_certificates").tablesorter();
});
http://tablesorter.com/docs/

How to Change the <div> text depending on multiple cehckboxes with jquery?

i'm trying to create an Excel-Form to a Web-form and now i'm stuck at this part: http://jsfiddle.net/J9NAS/40/
<table id="model">
<tr>
<th class="auto-style2">Basic</th>
<th class="auto-style2">Maxi</th>
<th>Short</th>
<th>Name</th>
<th class="auto-style2">Selection</th>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>A</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox1" type="checkbox" value="HA" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>B</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox2" type="checkbox" value="PA" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>C</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox3" type="checkbox" value="IA" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>D</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox4" type="checkbox" value="SPIN" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>E</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox5" type="checkbox" value="VB" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>F</td>
<td>asdasd)</td>
<td class="auto-style2">
<input id="Checkbox6" type="checkbox" value="BWCPN" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>G</td>
<td>asddas</td>
<td class="auto-style2">
<input id="Checkbox7" type="checkbox" value="GBH" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>H</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox8" type="checkbox" value="GR" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>I</td>
<td>dsad</td>
<td class="auto-style2">
<input id="Checkbox9" type="checkbox" value="IR" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>J</td>
<td>asdasds.</td>
<td class="auto-style2">
<input id="Checkbox10" type="checkbox" value="CC" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>K</td>
<td>asdasd.</td>
<td class="auto-style2">
<input id="Checkbox11" type="checkbox" value="GA" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>L</td>
<td>Rasdasd.</td>
<td class="auto-style2">
<input id="Checkbox12" type="checkbox" value="GPAT" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>M</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox13" type="checkbox" value="GPIN" class="maxi" />
</td>
</tr>
</table>
<h1>Callflow:</h1>
<div id="status"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#status").change(function () {
if (("#Checkbox1").attr("checked") === true) {
$("#status").append("#Checkbox1").val();
};
});
});
</script>
i want to show the user what kind of Model he chose (Basic or Maxi). The criteria are shown with the 'X's and depending on what features a user chooses, the text field below the form should show "basic" or "maxi".
Can someone help me with that? My JQuery/JS Skills are very basic, yet.

Try
$(document).ready(function () {
var $basic = $('.basic'), $maxi = $('.maxi'), $status = $('#status');
$basic.add($maxi).change(function(){
if($maxi.filter(':checked').length){
$status.text('Maxi')
} else if($basic.filter(':checked').length){
$status.text('Baisc')
} else {
$status.text('')
}
})
});
Demo: Fiddle

You're using a wrong selector. #status belongs to div
$("#status").change(function () {
so you need to have like
$("input[type=checkbox]").change(function () {
based on the value you can show/hide the div.

Categories

Resources