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

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)

Related

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>

sum time at multiple table with momentjs

I'm trying to sum time with momentjs.
Here is my JavaScript function :
function all_time()
{
$(".aaa").each(function() {
$this = $(this);
var total = moment().startOf('day');
$this.find('.jmljam').each (function() {
var value = $this.find(this).val();
var thisMoment = moment(value, 'HH:mm', true);
if(thisMoment.isValid()){
total.add(thisMoment);
$this.find(".totalseluruhjam").val(total.format("HH:mm"));
}
});
});
}
And Here is My HTML Table
<form method="POST" action="http://localhost:84/payroll2/dinas_audit/claim/1105321/AD0000002">
<table class="aaa table">
<thead>
<tr>
<td> No </td>
<td> Full Name </td>
<td> Attendance Date </td>
<td> In Time </td>
<td> Out Time </td>
<td> Waktu Lebih </td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-01</td>
<td class="jammasuk">
07:00:00 </td>
<td class="jampulang">
23:00:00 </td>
<td class="lebih">08:00</td>
</tr>
<tr>
<td>2</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-02</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>3</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-03</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Total Jam Lebih</td>
<td>
<input name="jamlebih" type="text" readonly disabled class="jmljam" />
</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Ro Yang DiDapatkan</td>
<td>
<input name="dapetro" type="text" readonly class="ronya" />
</td>
</tr>
</tbody>
</table>
<table class="aaa table">
<thead>
<tr>
<td> No </td>
<td> Full Name </td>
<td> Attendance Date </td>
<td> In Time </td>
<td> Out Time </td>
<td> Waktu Lebih </td>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-04</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
18:21:00 </td>
<td class="lebih">01:21</td>
</tr>
<tr>
<td>5</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-05</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
20:21:00 </td>
<td class="lebih">03:21</td>
</tr>
<tr>
<td>6</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-06</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
21:21:00 </td>
<td class="lebih">04:21</td>
</tr>
<tr>
<td>7</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-07</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>8</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-08</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>9</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-09</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Total Jam Lebih</td>
<td>
<input name="jamlebih" type="text" readonly disabled class="jmljam" />
</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Ro Yang DiDapatkan</td>
<td>
<input name="dapetro" type="text" readonly class="ronya" />
</td>
</tr>
</tbody>
</table>
<table class="table">
<tr>
<td> Total Jam Lebih : </td><td><input type="text" readonly="readonly" class='totalseluruhjam'/></td>
</tr>
<tr>
<td> Total RO Yang Di Dapat : </td><td><input type="text" readonly="readonly" class='totalseluruhro'/></td>
</tr>
</table>
</div>
<div class="box-footer">
<input value='submit' type='submit' class='btn btn-success pull-right claim'> </div>
</div>
</div>
</form>
As you can see from above. I have multiple tables. I'm able to sum .totalseluruhro` with this js
function all_ro()
{
var sum=0;
$(".aaa").each(function() {
$this = $(this);
sum += parseFloat($this.find('.ronya').val());
$('.totalseluruhro').val(sum);
})
}
But now i'm trying to sum every .jmljam and then set the result to .totalseluruhjam. I trying to sum jmljam with function all_time() but it's not working. I can't see any error from browser console. So, how to sum .jmljam ?
Please check my Fiddle https://jsfiddle.net/s9wfh9ye/23/

Give a shot with this.
function all_time()
{
var total = moment().startOf('day');
$(".aaa").each(function() {
$this = $(this);
$this.find('.jmljam').each (function() {
var value = $this.find(this).val();
var thisMoment = moment(value, 'HH:mm', true);
if(thisMoment.isValid()){
total.add(thisMoment);
}
});
});
$(".totalseluruhjam").val(total.format("HH:mm"));
}
and here is the updated fiddle https://jsfiddle.net/s9wfh9ye/24/

JavaScript: form selector not working

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>

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