使用Jquery实现单选选择
使用Jquery实现单选选择
提问于 2017-06-23 14:20:26
我想使用多个select实现组之间的无线电功能。
即在A组中，
如果用户单击A1，则必须取消选择A2和A3。如果用户单击A2，则必须取消选择A1和A3。如果用户单击A3，则必须取消选择A1和A2
即在B组中，
如果用户单击B1，则必须取消选择B2和B3。如果用户单击B2，则必须取消选择B1和B3。如果用户单击B3，则必须取消选择B1和B2
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet"/>
</head>
<body>
<select multiple="multiple">
<optgroup label="Group A">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</optgroup>
<optgroup label="Group B">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</optgroup>
</select>
<script src="multiple-select.js"></script>
<script>
$('select').multipleSelect(
{
multiple: true,
multipleWidth: 300,
selectAll: false,
width: '100%',
onClick: function(view) {
//;
}
}
);
</script>
</body>
回答 1
Stack Overflow用户
发布于 2017-06-23 14:27:12
单击此复选框时，此复选框的同级复选框的属性('checked')将更改为false。
<body>
<select multiple="multiple" id="multiselect">
<optgroup label="Group A" id="optgroup1">
<option value="1" class='radioa'>Radio A1</option>
<option value="2" class='radioa'>Radio A2</option>
<option value="3"class='radioa'>Radio A3</option>
</optgroup>
<optgroup label="Group B" id="optgroup2">
<option value="4" class="radiob">Radio B1</option>
<option value="5" class="radiob">Radio B2</option>
<option value="6" class="radiob">Radio B3</option>
</optgroup>
</select>
<script src="multiple-select.js"></script>
<script>
$('select').multipleSelect(
{
multiple: true,
multipleWidth: 300,
selectAll: false,
width: '100%'
});
$(document).ready(function(){
$(".radioa input[type='checkbox']").on('click', function() {
if($(this).prop('checked')==false){
$(this).prop('checked', false);
}
else{
$('.radioa input[type="checkbox"]').prop('checked', false);
$(this).prop('checked', true);
}
});
$(".radiob input[type='checkbox']").on('click', function() {
if($(this).prop('checked')==false){
$(this).prop('checked', false);
}
else{
$('.radiob input[type="checkbox"]').prop('checked', false);
$(this).prop('checked', true);
}
});
});
</script>
</body>有关siblings的信息请单击此处https://www.w3schools.com/jquery/traversing_siblings.asp
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44714349
复制相关文章
相似问题
腾讯云开发者
