Only one checkbox between two at each

Question

I have a code like this:

<tr>
    <td>
        <input type="checkbox" name="ordered[]" value="xxx"></input>
    </td>       
    <td>
        <input type="checkbox" name="inStock[]" value="yyy"></input>
    </td>
</tr>

The code is repeated for each result in MySQL.

Also I'm using this code:

<script>
    $('input[type="checkbox"]').on('change', function() {

        // uncheck sibling checkboxes (checkboxes on the same row)
        $(this).siblings().prop('checked', false);

    });
</script>

I need to select only one checkbox per row (per table tr). What should I change in javascript?

Thanks!

If you want only one checkbox why not use a **radio button**? Also your HTML is incorrect. Div cannot be a parent of TD. Only TR can be. — Praveen Kumar Purushothaman, Jun 29 '17 at 11:04
I still don't understand why aren't you using a radio button instead. — Praveen Kumar Purushothaman, Jun 29 '17 at 12:56

Ankit Agarwal · Accepted Answer · 2017-06-29T12:16:46.023

3

I think you need something like this

$( document ).ready(function() {
    $('input[type="checkbox"]').on('change', function() {
      var checkedValue = $(this).prop('checked');
        // uncheck sibling checkboxes (checkboxes on the same row)
        $(this).closest('tr').find('input[type="checkbox"]').each(function(){
           $(this).prop('checked',false);
        });
        $(this).prop("checked",checkedValue);

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="checkboxes">
<tr>
     <td>
        <input type="checkbox" name="inStock[]"  />inStock
    </td>
    <td>
        <input type="checkbox" name="ordered[]" value="xxx" />ordered
    </td>
</tr>
<tr>     
    <td>
        <input type="checkbox" name="inStock[]" value="yyy" />inStock
    </td>
    
     <td>
        <input type="checkbox" name="ordered[]" value="xxx" />ordered
    </td>
</tr>
</table>

edited Jun 29 '17 at 12:16

answered Jun 29 '17 at 11:26

Ankit Agarwal

30,378
5
37
62

Your code works better than others suggested. Thank You! :) But I still have one more problem. I can't select all of inStock[] checkboxes at the same time. My code: https://jsfiddle.net/rqfutq5b/2/ . – senti Jun 29 '17 at 11:31
I found the solution here: https://stackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in-html . Thank You. :) – senti Jun 29 '17 at 11:38
Please check now. I think now it is what you need – Ankit Agarwal Jun 29 '17 at 11:39
No. Previous solution was fine. I just need to have one button to select all inStock items (but not the button that would select all ordered items). Your previous solution is now successfully working on my server. Thanks again. – senti Jun 29 '17 at 12:09
Ok i will revert my code to previous then. Could you please up vote it. – Ankit Agarwal Jun 29 '17 at 12:15
I have reverted to the previous solution. I would appreciate if you up vote it as well. – Ankit Agarwal Jun 29 '17 at 12:17
I will do it as soon as I have enough reputation. – senti Jun 29 '17 at 15:04
That is really kind of you, Thanks again – Ankit Agarwal Jun 29 '17 at 15:07

score 0 · Answer 2 · answered Jun 29 '17 at 11:05

0

I think what you are asking for is a RadioButton. Just give them different ids but the same name and you will be able to select just one of them.

answered Jun 29 '17 at 11:05

Juanjo

670
7
17

score 0 · Answer 3 · answered Jun 29 '17 at 11:07

0

Try applying selector based on element name:

$('input[name="ordered[]"]').on('change', function() {

Or you would probably want to add some other attribute to identify the specific element you wish to select.

answered Jun 29 '17 at 11:07

Alex

163
7

score 0 · Answer 4 · answered Jun 29 '17 at 11:07

Since you haven't specified which sibling, say you can grab the first element out of a jQuery object using first:

$(this).siblings().first().prop('checked', false);

You can also do

$(this).siblings(".bar").eq(0).text()

You can use the eq method to reduce the matched set of elements to one at a specific index:

H.Sdq · Answer 5 · 2017-06-29T11:16:39.700

0

If you use radio buttons and use the same name for all of them, you are only able to select one radio button at a time and the other ones gets uncheked and like our friend mentioned you need to include your <td></td> tags in <tr></tr>tags.

edited Jun 29 '17 at 11:16

answered Jun 29 '17 at 11:08

H.Sdq

797
3
12
22

Only one checkbox between two at each

5 Answers5