Question

我有5个收音机按钮。

<ul id='answers_ul'>
    <li>
        <input class='crossAnswer' id='c_1' name='c_1' type='checkbox'>
        <label for='c_1'></label>
        <input class='alternative-letter' id='r_1' name='r_1' type='radio' />
        <div class='answers_letters'>A</div>
        <label class='res1' for='r_1'></label>
    </li>
    <li>
        <input class='crossAnswer' id='c_2' name='c_2' type='checkbox'>
        <label for='c_2'></label>
        <input class='alternative-letter' id='r_2' name='r_2' type='radio' />
        <div class='answers_letters'>B</div>
        <label class='res2' for='r_2'></label>
    </li>
    <li>
        <input class='crossAnswer' id='c_3' name='c_3' type='checkbox'>
        <label for='c_3'></label>
        <input class='alternative-letter' id='r_3' name='r_3' type='radio' />
        <div class='answers_letters'>C</div>
        <label class='res3' for='r_3'></label>
    </li>
    <li>
        <input class='crossAnswer' id='c_4' name='c_4' type='checkbox'>
        <label for='c_4'></label>
        <input class='alternative-letter' id='r_4' name='r_4' type='radio' />
        <div class='answers_letters'>D</div>
        <label class='res4' for='r_4'></label>
    </li>
    <li>
        <input class='crossAnswer' id='c_5' name='c_5' type='checkbox'>
        <label for='c_5'></label>
        <input class='alternative-letter' id='r_5' name='r_5' type='radio' />
        <div class='answers_letters'>E</div>
        <label class='res5' for='r_5'></label>
    </li>
</ul>

关于这个单选按钮的特殊之处在于，当用户单击其中任何一个时，会附加一个svg路径，例如“填充”单选按钮，而是保留前一个，然后填充新的，当时有2个......依此类推5个。

问题是，当我点击第二个单选按钮时，必须将先前的svg移除到另一个svg路径，并附加到新的svg路径中。

/* Deletes the previous radio svg path*/
function resetRadio(el) {
    var actualRadioName = $('input[type="radio"][name="' + el.getAttribute('name') + '"]');
    [].slice.call(actualRadioName).forEach(function(el) {
        var path = el.parentNode.querySelector('.radio-box > path');
        if (path) {
            path.parentNode.removeChild(path);
        }
    });
}


/* Button that deletes all five radio buttons svg paths*/
    jQuery('.clean_question').on('click', function(){
        selectsArr.forEach(function(obj,i) {
            [].forEach.call(obj.inputs,function(el){
                if (el.getAttribute('type') === 'radio')
                    resetRadio(el);
            })
        });
    })

这是生成svg路径的函数的摘录。

任何建议都会有用（：

Answer 1

HTML中的一组单选按钮必须具有相同的name属性值。这就是创建互斥功能的原因。您的按钮都有不同的名称，因此，您可以根据需要选择多个按钮。

使id唯一，并让您的JS代码按这些ID找到按钮，但名称必须相同。

当您这样做时，您可以更改和缩短定位按钮的jQuery：

 var actualRadioName = $('input[type="radio"][name="' + el.getAttribute('name') + '"]');

为：

 var actualRadioName = $("#" + el.id);

单选按钮复位功能

1 个答案: