jQuery не работает для выбора только одного флажка

Я построил таблицу с четырьмя строками и восемью столбцами, каждая с флажком. Я хочу, чтобы только один флажок разрешался проверять каждую строку. Я пытаюсь использовать jquery для этого. Логически, он работает в jsfiddle, но он не работает локально для меня. Сначала я использовал предупреждение, чтобы сначала загрузить jQuery.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>

источник

2015-05-14 Michael

Почему бы не использовать радиовход? Это именно то, что они предназначены для – Turnip

. Ваш javascript должен быть размещен после элементов, которые вы пытаетесь выбрать. Или завернутый в блок document.ready, как вы делаете с предупреждением. – Turnip

Ваши input элементы не являются братьями и сестрами, потому что у них разные родители - самые td элементы:

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

Вот почему это не работает:

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

Вместо этого:

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

Fiddle 1

В качестве альтернативы можно использовать радио-кнопку, имеющую те же name:

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

Таким образом, вам не нужно какое-либо JavaScript.

Fiddle 2

источник

2015-05-14 23:04:48

Не было бы намного проще просто сделать это

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

И у вас есть DIV внутри тр.

источник

2015-05-14 23:10:58 DavidDomain

jQuery не работает для выбора только одного флажка

ответ

Смежные вопросы