javascript - 可折叠在控制组内

Question

我正在尝试在“可折叠”中创建一个数据 Angular 色“控制组”。问题是我需要使控制组选择唯一，每个选择只检查一个。此时，当我选择一个选项时，它会保持选中状态，再次单击时甚至不会取消选择。

代码如下:

   <div data-role="collapsible">
            <h4>Food type list</h4>
            <fieldset data-role="controlgroup" data-inset="false">
                <input type="radio" name="radio-choice-v-2a" id="Vegetariano1" value="off">
                <label for="Vegetariano1">Vegetarian</label>
                <input type="radio" name="radio-choice-v-2b" id="Dieta1" value="off">
                <label for="Dieta1">Diet</label>
                <input type="radio" name="radio-choice-v-2c" id="Consumo_diario1" value="on" checked="checked">
                <label for="Consumo_diario1">Varied consumption</label>
            </fieldset>
        </div>

        <p></p>

        <div data-role="collapsible">
            <h4>Health condition list</h4>
            <fieldset data-role="controlgroup" data-inset="false">
                <input type="radio" name="radio-choice-v-3a" id="Diabetico1" value="off">
                <label for="Diabetico1">Diabetic</label>
                <input type="radio" name="radio-choice-v-3b" id="Cardiaco1" value="off">
                <label for="Cardiaco1">Cardiac</label>
                <input type="radio" name="radio-choice-v-3c" id="Hipertenso1" value="off">
                <label for="Hipertenso1">Hypertensive</label>
                <input type="radio" name="radio-choice-v-3d" id="Saudavel1" value="on" checked="checked">
                <label for="Saudavel1">Healthy</label>
            </fieldset>
        </div>

JSFiddle 链接:JSFiddle

Answer 1

每个组的

name 属性应该相同。

<input type="radio" name="foo" id="Diabetico1" value="off">
<label for="Diabetico1">Diabetic</label>
<input type="radio" name="foo" id="Cardiaco1" value="off">
<label for="Cardiaco1">Cardiac</label>
<input type="radio" name="foo" id="Hipertenso1" value="off">
<label for="Hipertenso1">Hypertensive</label>
<input type="radio" name="foo" id="Saudavel1" value="on" checked="checked">

Demo