在一个表单中有两组单选按钮。
在名为Result的第一组中，有4个选项:id="ok", id="fa", id="fp", id="bp"。
在名为 ResultCategories 的第二组中，有 9 个选项:id="cat1".... id="cat9"。
我想要的:
一个。如果单击确定，将取消选中 ResultCategories(如果已选中)。
如果点击fp 或 bp，将检查 ResultCategories 的 cat9。
如果单击 ResultCategories 的 cat1 到 cat8 之一，将检查 Result 的 fa。
这是 html:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="POST">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Quality Check</legend>
<div style="float: right;"><button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button></div>
<br /> <br /> <br />
<div class="row">
<div class="column">
<div id="Result">
<label>Result:</label>
<label class="radioContainer">Ok <input type="radio" name="Result" id ="ok" value="1" />
<span class="circle"></span>
</label>
<label class="radioContainer">Fasle Alarm <input type="radio" name="Result" id="fa" value="2" />
<span class="circle"></span>
</label>
<label class="radioContainer">False Pass <input type="radio" name="Result" id="fp" value="3" />
<span class="circle"></span>
</label>
<label class="radioContainer">Blatant Pass <input type="radio" name="Result" id="bp" value="4" />
<span class="circle"></span>
</label>
</div>
</div>
<br />
<div class="column">
<div id="ResultCategories"><label>Result Categories:</label>
<div>
<label class="radioContainer">Cat 1 <input type="radio" name="ResultCategories" id="cat1" value="1" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 2 <input type="radio" name="ResultCategories" id="cat2" value="2" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 3 <input type="radio" name="ResultCategories" id="cat3" value="3" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 4 <input type="radio" name="ResultCategories" id="cat4" value="4" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 5 <input type="radio" name="ResultCategories" id="cat5" value="5" />
<span class="circle"></span>
</label> <label class="radioContainer">Cat 6 <input type="radio" name="ResultCategories" id="cat6" value="6" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 7 <input type="radio" name="ResultCategories" id="cat7" value="7" />
<span class="circle"></span>
</label> <label class="radioContainer">Cat 8 <input type="radio" name="ResultCategories" id="cat8" value="8" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 9 <input type="radio" name="ResultCategories" id="cat9" value="9" />
<span class="circle"></span>
</label>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</body>
我知道这可以通过 jQuery 来完成，但我对 jQuery 不太了解。我研究并尝试了不同的东西。这是我最后尝试的:
$(document).ready(function() {
$('#ok').on('change', function() {
alert($('input[name=Result]:checked', '#ok').val());
if ($('input[name=Result]:checked', '#ok').val() == '1') {
$('#ResultCategories').prop('checked', false);
} else {
}
});
});
一旦选中 ok，它就会发出警报，但如果已经选中，它不会取消选中 ResultCategories。
我在这里添加了一个 jQuery fiddle :jQuery fiddle
希望高手能帮我解决问题。 提前致谢。
最佳答案
这是它的样子:
$(document).ready(function() {
$('input[name="Result"]').on('change', function() {
var checked_val = $('input[name="Result"]:checked').val();
if (checked_val == 1) {
//If ok is clicked, ResultCategories will be unchecked (if already checked)
$('input[name="ResultCategories"]').prop('checked', false);
} else if (checked_val == 3 || checked_val == 4) {
// If fp or bp is clicked, cat9 of ResultCategories will be checked.
$('#cat9').prop('checked', true);
}
});
$('input[name="ResultCategories"]').on('change', function() {
var checked_val = $('input[name="ResultCategories"]:checked').val();
if (checked_val >= 1 && checked_val <= 8) {
//If one of the cat1 to cat8 of ResultCategories is clicked, fa of Result will be checked.
$('#fa').prop('checked', true);
}
});
});<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
</head>
<body>
<div class="container">
<form action="" method="POST">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Quality Check</legend>
<div style="float: right;"><button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button></div>
<br /> <br /> <br />
<div class="row">
<div class="column">
<div id="Result">
<label>Result:</label>
<label class="radioContainer">Ok
<input type="radio" name="Result" id ="ok" value="1" /> <span class="circle"></span> </label>
<label class="radioContainer">Fasle Alarm <input type="radio" name="Result" id="fa" value="2" /> <span class="circle"></span> </label> <label class="radioContainer">False Pass <input type="radio" name="Result" id="fp" value="3" /> <span class="circle"></span> </label> <label class="radioContainer">Blatant Pass <input type="radio" name="Result" id="bp" value="4" /> <span class="circle"></span> </label></div>
</div>
<br />
<div class="column">
<div id="ResultCategories"><label>Result Categories:</label>
<div><label class="radioContainer">Cat 1 <input type="radio" name="ResultCategories" id="cat1" value="1" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 2 <input type="radio" name="ResultCategories" id="cat2" value="2" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 3 <input type="radio" name="ResultCategories" id="cat3" value="3" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 4 <input type="radio" name="ResultCategories" id="cat4" value="4" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 5 <input type="radio" name="ResultCategories" id="cat5" value="5" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 6 <input type="radio" name="ResultCategories" id="cat6" value="6" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 7 <input type="radio" name="ResultCategories" id="cat7" value="7" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 8 <input type="radio" name="ResultCategories" id="cat8" value="8" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 9 <input type="radio" name="ResultCategories" id="cat9" value="9" /> <span class="circle"></span> </label></div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</body>更紧凑的jquery:
$(document).ready(function() {
var result_dom = $('input[name="Result"]');
var categories_dom = $('input[name="ResultCategories"]');
var cat9 = $('#cat9');
var fa = $('#fa')
result_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val == 1) {
categories_dom.prop('checked', false);
} else if (checked_val == 3 || checked_val == 4) {
cat9.prop('checked', true);
}
});
categories_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val >= 1 && checked_val <= 8) {
fa.prop('checked', true);
}
});
});
关于javascript - 基于另一个单选组的单选按钮选中/取消选中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51355238/