PHP将动态变量作为radio的name值时如何用jQuery/JS获取选中值

你原有写法出错是因为jQuery属性选择器中包含特殊字符（/）且没有给属性值加引号，同时动态变量拼接方式不符合规范，下面提供三个可行方案：

方案1：加统一类名（最稳妥，无需处理动态ID） #

先修改PHP输出的单选按钮，给所有服务单选框加统一类名：

<?php
echo '
    Jack Baño: <input type="radio" class="servicio-radio" name="'.$idperro.'/servicio" value="'.$idperro.'/baño/'.$baño.'">
    Jack Corte: <input type="radio" class="servicio-radio" name="'.$idperro.'/servicio" value="'.$idperro.'/corte/'.$corte.'">

    Pepe Baño: <input type="radio" class="servicio-radio" name="'.$idperro.'/servicio" value="'.$idperro.'/baño/'.$baño.'">
    Pepe Corte: <input type="radio" class="servicio-radio" name="'.$idperro.'/servicio" value="'.$idperro.'/corte/'.$corte.'">
    
    <p id="precio"></p>
';
?>

之后用jQuery监听类的change事件实现需求：

$('.servicio-radio').on('change', function() {
    // 直接取当前选中的单选框value
    const selectedValue = $(this).val();
    // 如果只需要价格，拆分value取最后一段即可
    const precio = selectedValue.split('/').pop();
    // 填入p标签，要填完整value的话直接替换为selectedValue即可
    $('#precio').text(precio);
});

方案2：模糊匹配name属性（无需修改PHP代码） #

如果不想改动原有PHP代码，可以用jQuery的结尾匹配属性选择器，直接匹配所有name以/servicio结尾的单选框：

$('input[type="radio"][name$="/servicio"]').on('change', function() {
    const selectedValue = $(this).val();
    const precio = selectedValue.split('/').pop();
    $('#precio').text(precio);
});

方案3：正确拼接动态ID的属性选择器 #

如果必须通过动态$idperro变量匹配指定组的单选框，只要把属性值用引号包裹，正确拼接变量即可。
首先把PHP的动态$idperro输出到JS变量中：

<script>
const idperro = <?php echo $idperro; ?>;
</script>

再写对应选择器逻辑：

// 注意属性值要用引号包裹
const selectedValue = $(`input[name="${idperro}/servicio"]:checked`).val();
if (selectedValue) {
    const precio = selectedValue.split('/').pop();
    $('#precio').text(precio);
}

内容的提问来源于stack exchange，提问作者El Juy