0

我有一个单选按钮的 html/smarty 代码。我想扩展单选按钮的选择区域，以便用户可以更轻松地在此页面上选择它？使用标签的经典技巧在这里是不够的。点击按钮时执行的所有动作都必须执行，见onchange参数。我需要创建一个可点击区域，至少包括包含此行的整个表格，甚至更好：一个区域还包含每个单选按钮上方的图像。

这在 html、css、jquery 中可行吗？谢谢

<tr>
    <td valign="top">
        <input value="{$id_attribute|intval}" class="{$groupName}"  type="radio" name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination({$groupName});changeCombinationPrice();{if $groupName=='group_1'}getCheckedValue(document.forms['buy_block_form'].elements['group_1']);scaleImage('{$group_attribute|escape:'htmlall':'UTF-8'}','{$cover.id_image}.jpg');{else if $groupName=='group_2'}changeImage('{$group_attribute|escape:'htmlall':'UTF-8'}','{$cover.id_image}',{$id_attribute|intval}); {/if}" {if ($groupName=='group_1' and $countGroup1==1) } checked {/if} />
    </td>
    {assign var="hrup" value=$group_attribute|escape:'htmlall':'UTF-8'|lower}
    {if $feact==$hrup}
    <td width="17" valign="top">
    <script language="javascript" >
        Tooltips('{$feact},{$hrup}');   
    </script>  
    <div class="tooltip">
        <div class="toolimg"><img src="/pixelart/img/layout/corazon.jpg">
        </div>
        <div class="tooldescrip">{l s="Finition recommandée par l'artiste"}
        </div>
    </div>
    {/if}
    </td>
    <td>
        <div class="imputgroup_{$id_attribute|intval}">{$group_attribute|escape:'htmlall':'UTF-8'}
        </div>
    </td>
</tr>
<tr>
4

3 回答 3

0

或者像这里建议的那样 - 在您的单选按钮或复选框周围使用标签： 如何制作具有大目标区域的 HTML 单选按钮？

于 2013-12-17T12:51:41.437 回答
0

您需要将可点击内容包装在另一个标签中（A合适）并将事件处理程序连接到该标签。您还必须相应地切换 JavaScript 中的单选按钮。

于 2012-10-17T20:29:29.617 回答
0

用a标签包裹该区域：

<a href="Javascript:void()" id="radioClickAreaid{$id_attribute|intval}" onclick="radioClickArea(document.forms['buy_block_form'].elements['{$groupName}'], '{$id_attribute|intval}');javascript:findCombination({$groupName});changeCombinationPrice();{if $groupName=='group_1'}getCheckedValue(document.forms['buy_block_form'].elements['group_1']);scaleImage('{$group_attribute|escape:'htmlall':'UTF-8'}','{$cover.id_image}.jpg');{else if $groupName=='group_2'}changeImage('{$group_attribute|escape:'htmlall':'UTF-8'}','{$cover.id_image}',{$id_attribute|intval}); {/if}">

它具有与单选按钮的 onchange 相同的 onclick 参数（虽然不是很优雅！），并且调用了一个 javascript 函数：

function radioClickArea(radioObj, id_attribute) {
    if(!radioObj)
    return;
    var radioLength = radioObj.length;
    if(radioLength == undefined) {
            radioObj.checked = (radioObj.value == id_attribute.toString());
            return;
    }
    for(var i = 0; i < radioLength; i++) {
            radioObj[i].checked = false;
            if(radioObj[i].value == id_attribute.toString()) {
                    radioObj[i].checked = true;
        }
    }   
    return false; // so that the link goes nowhere
}

单选按钮被选中确定。有没有办法不重复 onchange/onclick 参数？

于 2012-10-18T14:11:49.643 回答