I have a form field where I have two fields one containing countries and other containing memberships and both have check boxes. The problem is that with the code I am using to Select All the countries (check/uncheck all the check boxes for countries) also checks or unchecks the memberships field. I want to differentiate between the two so that I only check countries and not the check boxes in the membership field.
Here is the code I am using:
$("#checkCountries").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});
EDIT: HTML PART
<tr>
<th>Target Memberships</th>
<td>
<div class="target-memberships col-sm-8">
<input type="checkbox" value="1" name="memberships[]" checked> Standard<br>
<input type="checkbox" value="2" name="memberships[]" checked> Premium<br>
<input type="checkbox" value="3" name="memberships[]" checked> Elite<br>
</div>
</td>
</tr>
<tr>
<th>Target Countries</th>
<td>
<input type="checkbox" id="checkCountries" checked> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country" value="Afghanistan" checked> Afghanistan<br>
<input type="checkbox" name="country[]" id="country" value="Albania" checked> Albania<br>
<input type="checkbox" name="country[]" id="country" value="Algeria" checked> Algeria<br>
<input type="checkbox" name="country[]" id="country" value="American Samoa" checked> American Samoa<br>
<input type="checkbox" name="country[]" id="country" value="Andorra" checked> Andorra<br>
<input type="checkbox" name="country[]" id="country" value="Angola" checked> Angola<br>
</div>
</td>
</tr>
Here, input:checkbox is making the code to work on all the checkboxes in the page. I think I need to change this to make it work specifically for that particular field (countries) only. Please help.
If your HTML is like this:
<input type="checkbox" id="checkCountries" checked="checked"> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br>
<input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br>
<input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br>
<input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br>
<input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br>
<input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br>
</div>
In HTML, each id must be unique. The name can be the same as you have to define the array: country[], but the id must be unique to each element. Since input has no closing tag, it is best to add that to the end of the tag, <input type="checkbox" /> for example.
You can use this:
$("#checkCountries").click(function(){
$(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked"));
});
This targets the Class selector target-countries and the input elements within that are of a type checkbox. It will then set the property checked to match the value of the current checkbox.
Working Snippet:
$(function() {
$("#checkCountries").click(function() {
$(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked"));
});
});
.target-countries {
margin: 3px;
border: 1px solid #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkCountries" checked="checked"> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br>
<input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br>
<input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br>
<input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br>
<input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br>
<input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br>
</div>
Hope that helps.
Related
I have multiple checkbox i want to disable other checkbox(i.e Student, Parent, Faculty) if i select All but if I select Student or others the All checkbox only will be disabled
<input type="checkbox" name="scope[]" value="All">ALL</input>
<input type="checkbox" name="scope[]" value="Student">Student</input>
<input type="checkbox" name="scope[]" value="Parent">Parent</input>
<input type="checkbox" name="scope[]" value="Faculty">Faculty</input>
<input type="checkbox" name="scope[]" value="Others">Others</input>
You can use same name but different ID's to disable your checkbox
<input type="checkbox" name="scope[]" value="All" id="all">ALL</input>
<input type="checkbox" name="scope[]" value="Student" id="student">Student</input>
<input type="checkbox" name="scope[]" value="Parent" id="Parent">Parent</input>
<input type="checkbox" name="scope[]" value="Faculty" id="Faculty">Faculty</input>
<input type="checkbox" name="scope[]" value="Others" id="others">Others</input>
and you can use JavaScript to disable checkbox.
document.getElementById("others").disabled = true;
I am trying to make the input text change when pressing on radio button
the form it self have 5 option with multiple radio buttons and input text
the input text that i am trying to change is in different form since also when changing the input text in the main form it should change it on the other one
i get this for now
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
but this change the input text in the current form
how can i make to change the second form input text
main form
<form action="cart.php" name="cart" id="cart" target="cart"
method="post" onsubmit="return cart();">
<input name="selector0" type="hidden" value="A">
<input name="selector0hyphen" type="hidden" value="-">
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td></tr>
</tbody>
so for now if i press on radio button it change the input in the same form
i need to change the input text on the second form
for example i press on type p it change the first input text in the second form
thanks
Problem in your code:
find("input[type=text]").val(this.value); will give you all the input type=text, and update all of them with this.value, what you really want is to target the specific element, so should be something like .find("input[name=" + this.name + "][type=text]")
Solution:
Use .find("input[name=" + this.name + "][type=text]") to find the last element with name="xxxx" and type=text, this will return only one result since the combination is unique
The idea is to target the single input element you want to update, also you should clean up your code, attribute orders etc, remove id if you are not using it.
UPDATE: change input update radio button.
.find("input[type=radio][name=" + this.name + "][value=" + this.value + "]")
when update your text input, you can target the input where type=radio with same name and same value then use .prop("checked", true) to check it.
$(document).ready(function() {
$("input[type=radio]").click(function() {
$(this).closest('body').find("input[name=" + this.name + "][type=text]").val(this.value);
});
$("input[type=text]").on('input', function() {
$(this).closest('body').find("input[type=radio][name=" + this.name + "][value=" + this.value + "]").prop("checked", true);
});
//init
$("input[type=radio]:checked").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
main form
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector-column-boxhead"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector-column-boxhead">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector-column-boxhead">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td>
</tr>
</tbody>
The form your changing the input is the first form,
select the next form by adding the next method after ( closest( form) )
Don't Forget form tags plus they have to be next to one another.
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').next() .find("input[type=text]").val(this.value);
});
});
$(this).closest() is used to find the closest parent element. It would only select the element that is the parent of $(this) element.
You should give the text inputs unique IDs so that they can be easily identified.
Change this-
<input name="selector1" type="text" value="_" maxlength="3">
To this-
<input name="selector1" id="selector1" type="text" value="_" maxlength="3">
And then in jquery,
$("input[type=radio]").click(function () {
$("#selector1").val(this.value);
});
Try this code
Add a common class to every radio button
$(document).ready(function() {
$('.class_name_of_radio').change(function() {
$("input[type=text][name="+this.name+"]").val(this.value);
});
});
Create a onchange function for all the radio button on all the forms. Pass the value of the radio button on the function and get the value from the function.
Eg:
Function myChange(myRadioVal)
{
$("#inputTextBoxId").val(myRadioVal);
//code here
}
I have an 4 input checkbox tag, and 1 div tag to display a price if one checkbox is checked
<input type="checkbox" value="None" id="check1" />
<input type="checkbox" value="None" id="check2" />
<input type="checkbox" value="None" id="check3" />
<input type="checkbox" value="None" id="check4" />
<div id="price"></div>
What i want to do if only 1 random checkbox is checked it will display number 1,800 on div#price, but if 2 checkbox is checked it will summed become 3,600 and so on until 4 checkbox. But i really confused how to do that using jQuery. Any idea?
Use :checkbox selector to assign change event on all thre type = checkbox elements, one can add [value="None"] while selecing checkbox elements to be more specific.
Use :checkbox:checked selector to select the checked checkboxes.
var val = 1800;
$(':checkbox[value="None"]').on('change', function() {
var len = $(':checkbox:checked').length;
$('#price').text(len * val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" value="None" id="check1" />
<input type="checkbox" value="None" id="check2" />
<input type="checkbox" value="None" id="check3" />
<input type="checkbox" value="None" id="check4" />
<div id="price"></div>
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" value="100" id="check1" />
<input type="checkbox" value="21" id="check2" />
<input type="checkbox" value="22" id="check3" />
<input type="checkbox" value="4" id="check4" />
<div id="price"></div>
JAVASCRIPT
var price=0;
$(':checkbox').on('change', function() {
var len = parseInt(this.value);
if($(this).is(':checked')){
price+=len;
}else{
price-=len;
}
console.log(price)
$('#price').text(price);
});
JSBIN
JSBIN-URL
On my page I have two radio buttons for yes and two for no.
How I can do it if I check yes in one place it check second yes button or if I check no the second no will check too.
Following is my code:
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
how i can select two radios at the same time?
You can't have more than one button checked in the same radio group. You need to give the two sets different names. I used search_by_range_A and search_by_range_B. Also IDs have to be unix.
To make it automatically check the other button, use a .change() handler that gets the value and then selects the other checkbox with the same value and checks it.
$(":radio").change(function() {
var value = $(this).val();
$(":radio[value=" + value + "]").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<input checked="checked" id="search_by_range_A_no" name="search_by_range_A" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_A_yes" name="search_by_range_A" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_B_no" name="search_by_range_B" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_B_yes" name="search_by_range_B" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
And again...ID of every element on a webpage should be Unique!
Use classes instead.
But nevertheless, it is still possible to achieve that. The only thing you have to change in your code is the name of the radio button because all radio buttons with the same name are assumed to be a group, and the web-browser only allows selection of only one of them by default, and you cannot control that.
Therefore change the name to regroup the radio buttons into two different sets.
Then you can do this:
$("[id^='search_by_range']").change(function(){
$("[id='"+$(this).attr("id")+"']").prop("checked", "checked");
});
Here is the JSFiddle demo
you can use javascript for this problem
here i can give you hint how can you can do !
$('#search_by_range_yes').attr('checked','checked');
$('#search_by_range_yes').addAttr('checked');
this would help :)
thanks
In same group radio buttons you can't check more than one. I used two different groups for this.
Find the below code:
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_range_second" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range_second" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
JS Code:
$(function() {
$(":radio").on("change", function() {
var val = $(this).val(), checked = this.checked;
var others = $(":radio[value='"+val+"']").not(this);
others.prop('checked', true);
});
});
You can find the working demo here: http://jsfiddle.net/26g5rxs6/
1.i understand your problem these happens because all radio button has same name.
2.Same name radio button has one group and select only in that group.
3.You can group radio button by 1. search by no 2. search by range. i updated your code by following code.
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_no" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_no" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
Okay, so I have a bit of a problem. I have some code, the JS works (at least with the non-CSS modified version), but it fails with the CSS modified version. Wondering if anyone can lend me some help to figure out what went wrong with the implementation of the CSS...
What I want to have happen, is the any of the first 4 chekboxes, if checked, disable all others. But, if any of the other checkboxes (numbers 5 and up) are checked, none are disabled (unless of course someone checks one of the first four).
My JavaScript:
<script type="text/javascript">
$(window).load(function(){
var $inputs = $('input[type=checkbox]', $('#test'));
var $inputs2 = $('input[type=checkbox]', $('#test2'));
$inputs.change(function(){
var $this = $(this);
$inputs.not(this).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$inputs.not(this).prop('checked',false);
}
});
$inputs2.change(function(){
var $this = $(this);
$inputs2.not(this).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$inputs2.not(this).prop('checked',false);
}
});
});
The first Div:
<div id="test" style="float:left; width:50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="font-size:3px"> </td></tr>
<tr>
<p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
<td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" />
<label for="1" class="css-label">1</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" />
<label for="2" class="css-label">2</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" />
<label for="3" class="css-label">3</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" />
<label for="4" class="css-label">4</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
<label for="5" class="css-label">5</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" />
<label for="6" class="css-label">6</label></td></tr>
</table>
</div>
My CSS, if needed:
<style>
#Error {display: none;}
input[type=checkbox].css-checkbox {display:none;}
input[type=checkbox].css-checkbox + label.css-label {padding-left:20px;height:20px;display:inline-block;line-height:20px;background-repeat:no-repeat;background-position: 0 0;font-size:15px;vertical-align:middle;cursor:pointer;}
input[type=checkbox].css-checkbox:checked + label.css-label {background-position: 0 -20px;}
input[type=checkbox].css-checkbox:disabled + label.css-label {background-position: 0 -40px;}
.css-label{ background-image:url(web-two-style.png);}
</style>
The problem is: the following works, and the following was later modified with CSS and I can't figure out what went wrong.
What works:
<div id='test'>
<input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</div>
It gets even odder when I add the code that worked to the same div as the one that doesn't, since it the above non-CSS then works properly and will disable (where appropriate) all the checkboxes regardless of CSS, but when the CSS are checked, all are disabled:
<div id="test" style="float:left; width:50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="font-size:3px"> </td></tr>
<tr>
<p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
<td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" />
<label for="1" class="css-label">1</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" />
<label for="2" class="css-label">2</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" />
<label for="3" class="css-label">3</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" />
<label for="4" class="css-label">4</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
<label for="5" class="css-label">5</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" />
<label for="6" class="css-label">6</label></td></tr> <input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</table>
</div>
.index() returns the index relative to the sibling elements. In your working example the siblings of an <input> are the other inputs. In your non-working example the only sibling is the <label> element.
In your "odd" example all inputs are siblings again.
In order to make it work anyway you can use .index(element):
$inputs.index($this)
This returns the index of the input $this within the jquery input collection $inputs. Working fiddle.
I would change the ID's on your input fields, ID's can't start with a number
<input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
may cause problems with your JS. I would try something like
<input type="checkbox" id="field-5" name="5" class="css-checkbox" value="5" />