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

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

javascript jquery html checkbox

Javascript jQuery不适用于仅选择一个复选框,javascript,jquery,html,checkbox,Javascript,Jquery,Html,Checkbox,我构建了一个包含四行八列的表，每个表都有一个复选框。我希望每行只允许选中一个复选框。我正在尝试使用jquery来实现这一点。从逻辑上讲，它在JSFIDLE中工作，但在本地对我不起作用。我确实首先使用了一个警报来确保jQuery首先被加载下面是我的代码。问题是，当我只允许选中一个复选框时，我仍然可以在每行选中多个复选框： <body> <h2>Checkbox Test</h2> <script type="text/javascrip

我构建了一个包含四行八列的表，每个表都有一个复选框。我希望每行只允许选中一个复选框。我正在尝试使用jquery来实现这一点。从逻辑上讲，它在JSFIDLE中工作，但在本地对我不起作用。我确实首先使用了一个警报来确保jQuery首先被加载

下面是我的代码。问题是，当我只允许选中一个复选框时，我仍然可以在每行选中多个复选框：

 <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>


复选框测试
函数onLoadAlert（）{
警报（“Sup”）；
}
$（文档）.ready（onLoadAlert）；
$（'input[type=“checkbox”]”）。在（'change'，function（）上{
//取消选中同级复选框（同一行上的复选框）
$（this.sibbines（）.prop（'checked'，false）；
//取消选中同一列中的复选框
$（'div'）.find（'input[type=“checkbox”]：eq（'+$（this.index（）+'））。not（this.prop（'checked'，false））；
});
成本
降低成本
中立的
增加的成本
不知道
高
中等
低
无效
低
中等
高
资本成本

您的

输入

元素不是兄弟元素，因为它们有不同的父元素--

td

元素：

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

相反，请执行以下操作：

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

或者，您可以使用具有相同名称的单选按钮：

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

这样，您就不需要任何JavaScript

这样做不是简单得多吗

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

在tr

中有一个div，为什么不使用无线电输入？这正是它们为您设计的，您的javascript必须放在您尝试选择的元素之后。或者像处理警报一样包装在document.ready块中。

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