在我的代码中，我只想从每个 .form-group.row 中选择 1 个复选框 - 就像一个单选按钮。每个 form-group 都可以参加多次，每个复选框的名称相同。这就是我尝试在特定(父)表单组中进行选择的原因。
我知道单选按钮是为这样的事情而设计的，但我使用动态表单。 我尝试了很多东西，但似乎没有一个起作用？
有人可以帮帮我吗？非常感谢您!
$('.form-group input').on('change', function() {
if ($(this).is(':checked')) {
$(this).siblings('input').prop('checked', false);
} else
$('.form-group input').prop('checked', false);
});/* So, every "Reinigen" card has his own "Rookgasafvoer" with it's own 3 checkboxes. */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="<? echo MAP_URL; ?>css/jquery-ui.min.css" />
<!-- Start Card Reinigen -->
<div class="card card-red">
<div class="card-header">
<strong>Reinigen</strong>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-1 text-center">
<label style="font-size: 10px; font-weight: bold;">Goed</label>
</div>
<div class="col-sm-1 text-center">
<label style="font-size: 10px; font-weight: bold;">N.V.T</label>
</div>
<div class="col-sm-1 text-center">
<label style="font-size: 10px; font-weight: bold;">Niet goed</label>
</div>
<div class="col-sm-5">
<label style="font-size: 10px; font-weight: bold;">Opmerkingen:</label>
</div>
</div>
<div class="form-group row">
<label for="verwarming_rookgas" class="col-sm-4 col-form-label">Rookgasafvoer:</label>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="nvt" checked>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="niet-goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control form-control-lg" name="verwarming_rookgas_opmerkingen[]">
</div>
</div>
<div class="form-group row">
<label for="verwarming_warmtewisselaar" class="col-sm-4 col-form-label">Warmtewisselaar:</label>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="nvt" checked>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="niet-goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control form-control-lg" name="verwarming_warmtewisselaar_opmerkingen[]">
</div>
</div>
<div class="form-group row">
<label for="verwarming_condensafvoer" class="col-sm-4 col-form-label">Condens afvoer:</label>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="nvt" checked>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="niet-goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control form-control-lg" name="verwarming_condensafvoer_opmerkingen[]">
</div>
</div>
</div>
</div>
<!-- End Card Reinigen -->
<!-- Start Card Reinigen -->
<div class="card card-red">
<div class="card-header">
<strong>Reinigen</strong>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-1 text-center">
<label style="font-size: 10px; font-weight: bold;">Goed</label>
</div>
<div class="col-sm-1 text-center">
<label style="font-size: 10px; font-weight: bold;">N.V.T</label>
</div>
<div class="col-sm-1 text-center">
<label style="font-size: 10px; font-weight: bold;">Niet goed</label>
</div>
<div class="col-sm-5">
<label style="font-size: 10px; font-weight: bold;">Opmerkingen:</label>
</div>
</div>
<div class="form-group row">
<label for="verwarming_rookgas" class="col-sm-4 col-form-label">Rookgasafvoer:</label>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="nvt" checked>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="niet-goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control form-control-lg" name="verwarming_rookgas_opmerkingen[]">
</div>
</div>
<div class="form-group row">
<label for="verwarming_warmtewisselaar" class="col-sm-4 col-form-label">Warmtewisselaar:</label>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="nvt" checked>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="niet-goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control form-control-lg" name="verwarming_warmtewisselaar_opmerkingen[]">
</div>
</div>
<div class="form-group row">
<label for="verwarming_condensafvoer" class="col-sm-4 col-form-label">Condens afvoer:</label>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="nvt" checked>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="niet-goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control form-control-lg" name="verwarming_condensafvoer_opmerkingen[]">
</div>
</div>
</div>
</div>
<!-- End Card Reinigen -->最佳答案
尝试使用以下代码:
$('.form-group input').on('change', function() {
if ($(this).is(':checked')) {
$(this).closest(".row").find('input:checkbox').prop('checked', false);
$(this).prop('checked', true)
} else
$(this).prop('checked', false);
});
当您单击一个未选中的复选框时，它会取消选中已选中的复选框，然后选中您单击的复选框。
演示
$('.form-group input').on('change', function() {
if (!$(this).is(':checked')) {
$(this).prop('checked', true)
} else {
$(this).closest(".row").find('input:checkbox').prop('checked', false);
$(this).prop('checked', true)
}
});/* So, every "Reinigen" card has his own "Rookgasafvoer" with it's own 3 checkboxes. */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="<? echo MAP_URL; ?>css/jquery-ui.min.css" />
<!-- Start Card Reinigen -->
<div class="card card-red">
<div class="card-header">
<strong>Reinigen</strong>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-1 text-center">
<label style="font-size: 10px; font-weight: bold;">Goed</label>
</div>
<div class="col-sm-1 text-center">
<label style="font-size: 10px; font-weight: bold;">N.V.T</label>
</div>
<div class="col-sm-1 text-center">
<label style="font-size: 10px; font-weight: bold;">Niet goed</label>
</div>
<div class="col-sm-5">
<label style="font-size: 10px; font-weight: bold;">Opmerkingen:</label>
</div>
</div>
<div class="form-group row">
<label for="verwarming_rookgas" class="col-sm-4 col-form-label">Rookgasafvoer:</label>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="nvt" checked>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="niet-goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control form-control-lg" name="verwarming_rookgas_opmerkingen[]">
</div>
</div>
<div class="form-group row">
<label for="verwarming_warmtewisselaar" class="col-sm-4 col-form-label">Warmtewisselaar:</label>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="nvt" checked>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="niet-goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control form-control-lg" name="verwarming_warmtewisselaar_opmerkingen[]">
</div>
</div>
<div class="form-group row">
<label for="verwarming_condensafvoer" class="col-sm-4 col-form-label">Condens afvoer:</label>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="nvt" checked>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="niet-goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control form-control-lg" name="verwarming_condensafvoer_opmerkingen[]">
</div>
</div>
</div>
</div>
<!-- End Card Reinigen -->
<!-- Start Card Reinigen -->
<div class="card card-red">
<div class="card-header">
<strong>Reinigen</strong>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-1 text-center">
<label style="font-size: 10px; font-weight: bold;">Goed</label>
</div>
<div class="col-sm-1 text-center">
<label style="font-size: 10px; font-weight: bold;">N.V.T</label>
</div>
<div class="col-sm-1 text-center">
<label style="font-size: 10px; font-weight: bold;">Niet goed</label>
</div>
<div class="col-sm-5">
<label style="font-size: 10px; font-weight: bold;">Opmerkingen:</label>
</div>
</div>
<div class="form-group row">
<label for="verwarming_rookgas" class="col-sm-4 col-form-label">Rookgasafvoer:</label>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="nvt" checked>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="niet-goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control form-control-lg" name="verwarming_rookgas_opmerkingen[]">
</div>
</div>
<div class="form-group row">
<label for="verwarming_warmtewisselaar" class="col-sm-4 col-form-label">Warmtewisselaar:</label>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="nvt" checked>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="niet-goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control form-control-lg" name="verwarming_warmtewisselaar_opmerkingen[]">
</div>
</div>
<div class="form-group row">
<label for="verwarming_condensafvoer" class="col-sm-4 col-form-label">Condens afvoer:</label>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="nvt" checked>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-1 text-center">
<label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;">
<input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="niet-goed">
<span class="custom-control-indicator"></span>
</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control form-control-lg" name="verwarming_condensafvoer_opmerkingen[]">
</div>
</div>
</div>
</div>
<!-- End Card Reinigen -->关于javascript - 如何让复选框在父 div 中充当 radio ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47054594/