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領域をタグでラップ:

<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 に答える
0

クリック可能なコンテンツを別のタグ (A適切) でラップし、イベント ハンドラーをそのタグに接続する必要があります。それに応じて、JavaScript のラジオ ボタンも切り替える必要があります。

于 2012-10-17T20:29:29.617 に答える