gpt4 book ai didi

javascript - 使用 Jquery 实现单选

转载 作者:行者123 更新时间:2023-11-28 04:29:50 27 4
gpt4 key购买 nike

我想使用多重选择在组之间实现 radio 功能。

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

最佳答案

单击此复选框时,此复选框的同级复选框的属性('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>

在这里引用 sibling https://www.w3schools.com/jquery/traversing_siblings.asp

关于javascript - 使用 Jquery 实现单选,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44714349/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com