jQuery不适用于仅选择一个复选框

Question

I have built a table with four rows and eight columns, each with a checkbox. 我建立了一个有四行八列的表，每个表都有一个复选框。 I want only one checkbox to be allowed to check per row. 我希望只允许一个复选框检查每一行。 I am trying to use jquery to do this. 我正在尝试使用jquery来做到这一点。 Logically, it works in jsfiddle but it does not work locally for me. 从逻辑上讲，它可以在jsfiddle中工作，但对我而言不适用于本地。 I did use an alert first to make sure jQuery is being loaded first. 我确实先使用了一个警报来确保先加载jQuery。

Here is my code below. 这是下面的代码。 The problem is, I can still check multiple checkboxes per row when I should only be allowed to check one: 问题是，当只允许我检查一个复选框时，我仍然可以在每行选中多个复选框：

 <body>
    <h2>Checkbox Test</h2>
    <script type="text/javascript" src="http://localhost/mytesting/jquery-2.1.4.js"></script>
    <script type="text/javascript">

    function onLoadAlert() {
        alert('Sup');
    }

    $(document).ready(onLoadAlert);
    </script>

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

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

          // uncheck checkboxes in the same column
          $('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);

        });
    </script>

    <table border="1">

    <tbody>
    <tr>
        <th><b>COST</b></th>
        <th colspan="3">Reduced Cost</th>
        <th>Neutral</th>
        <th colspan="3">Increased Cost</th>
        <th>Don't Know</th>
    </tr>
    <tr>
        <th></th>
        <th>High</th>
        <th>Medium</th>
        <th>Low</th>
        <th>No effect</th>
        <th>Low</th>
        <th>Medium</th>
        <th>High</th>
        <th></th>
    </tr>
    <tr>
        <td>Capital cost</td>
        <div>
        <td><input type="checkbox" id="matrix1" value="1"></td>
        <td><input type="checkbox" id="matrix2" value="1"></td>
        <td><input type="checkbox" id="matrix3" value="1"></td>
        <td><input type="checkbox" id="matrix4" value="1"></td>
        <td><input type="checkbox" id="matrix5" value="1"></td>
        <td><input type="checkbox" id="matrix6" value="1"></td>
        <td><input type="checkbox" id="matrix7" value="1"></td>
        <td><input type="checkbox" id="matrix8" value="1"></td>
        </div>

    </tr>



    </tbody>

Answer 1

Your input elements are not siblings, because they have different parents – the td elements: 您的input元素不是兄弟姐妹，因为它们的父元素不同td元素：

<td><input type="checkbox" id="matrix1" value="1"></td>
<td><input type="checkbox" id="matrix2" value="1"></td>

That's why this doesn't work: 这就是为什么这行不通的原因：

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

Instead, do this: 相反，请执行以下操作：

$(this).closest('tr').find('input').not(this).prop('checked', false);

Fiddle 1 小提琴1

Alternatively, you could use radio buttons having the same name : 或者，您可以使用具有相同name单选按钮：

  <td><input type="radio" name="matrix"></td> <td><input type="radio" name="matrix"></td> <td><input type="radio" name="matrix"></td>

That way, you wouldn't need any JavaScript. 这样，您将不需要任何JavaScript。

Fiddle 2 小提琴2

Answer 2

Would it not be a lot simpler to just do this 这样做会不会简单得多

var checkBoxes = $('input[type=checkbox]');
$('table').on('click', 'input[type=checkbox]', function () {
  checkBoxes.prop('checked', false);
  $(this).prop('checked', true);
});

And you have a div inside a tr . 而且在tr内有一个div 。

jQuery不适用于仅选择一个复选框

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-05-14 23:04:48

解决方案2
0 2015-05-14 23:10:58

jQuery不适用于仅选择一个复选框

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-05-14 23:04:48

解决方案2 0 2015-05-14 23:10:58

解决方案1
2 已采纳 2015-05-14 23:04:48

解决方案2
0 2015-05-14 23:10:58