{"id":124646,"date":"2022-11-16T17:42:09","date_gmt":"2022-11-16T16:42:09","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-data-list-with-radio-buttons\/"},"modified":"2025-02-03T16:44:52","modified_gmt":"2025-02-03T15:44:52","slug":"how-to-create-a-data-list-with-radio-buttons","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/how-to-select-rows-data-list-with-radio-buttons","title":{"rendered":"C\u00f3mo seleccionar una fila de la lista de datos con botones de opci\u00f3n"},"content":{"rendered":"<p>En este ejemplo, aprender\u00e1s a utilizar botones de opci\u00f3n para seleccionar una fila de datos.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73206547\/index.html\" width=\"820px\" height=\"350px\" frameborder=\"0\"><\/iframe><\/p>\n<p>As\u00ed es como se construye:<\/p>\n<h3><strong>Ver&nbsp;<\/strong><\/h3>\n<ul>\n<li>Ve a la paleta \u00abMaestros de datos\u00bb y haz clic en el bot\u00f3n \u00ab+\u00bb para crear un nuevo \u00abMaestro de datos\u00bb, ll\u00e1malo \u00abMuestra\u00bb, crea dos atributos: \u00abNombre\u00bb y \u00abApellidos\u00bb, haz clic en \u00abAceptar\u00bb.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-1.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-1.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-1.png\" alt=\"Crear un maestro de datos\">Crear un maestro de datos<\/source><\/video><\/li>\n<li>Haz clic con el bot\u00f3n derecho del rat\u00f3n en el \u00abMaestro de datos\u00bb que acabas de crear y selecciona \u00abVer y editar registros\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71239\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-2.png\" alt=\"\" width=\"792\" height=\"337\"><\/li>\n<li>Escribe los datos de tu ejemplo y pulsa \u00abOk\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71239\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-3.png\" alt=\"\" width=\"792\" height=\"337\"><\/li>\n<li>Selecciona \u00abLista de datos\u00bb de la secci\u00f3n \u00abContenido din\u00e1mico\u00bb y col\u00f3cala en el lienzo, se habilitar\u00e1 la ventana \u00abNueva lista de datos\u00bb, y se te pedir\u00e1 que nombres tu lista, a continuaci\u00f3n elige el \u00abMaestro de datos\u00bb que has creado y selecciona todos los atributos. Haz clic en \u00abAceptar\u00bb para terminar de crear la lista. <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-4.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-4.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-4.png\" alt=\"Crear una lista de datos\">Crear una lista de datos<\/source><\/video><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li><span style=\"font-weight: 400;\">Desde la biblioteca de widgets b\u00e1sicos, formularios y entradas, selecciona un \u00abBot\u00f3n de radio\u00bb, mant\u00e9n pulsado comando (Mac), control (windows) y arr\u00e1stralo dentro de la primera fila. Ver\u00e1s un tinte azul cuando arrastres un elemento dentro.<br \/>\n<\/span><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-4.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-5.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-4.png\" alt=\"Insertar un bot\u00f3n de radio\">Insertar un bot\u00f3n de radio<\/source><\/video><\/li>\n<li><span style=\"font-weight: 400;\">Coloca dos \u00abTexto\u00bb junto a tu \u00abLista de datos\u00bb, escribe \u00abNombre\u00bb y \u00abApellidos\u00bb, y luego pon dos \u00abCampos de texto de entrada\u00bb junto a cada texto.<br \/>\n<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Selecciona el \u00abCampo de texto de entrada\u00bb y, en la paleta Propiedades, selecciona el borde inferior para hacerlo visible en la simulaci\u00f3n, y repite la acci\u00f3n para el segundo \u00abCampo de texto de entrada\u00bb.<\/span><\/li>\n<li>La cabecera de la \u00abLista de datos\u00bb se puede editar desde la paleta Propiedades para cambiar el fondo y el color del texto.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71239\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-6.png\" alt=\"\" width=\"792\" height=\"337\"><\/li>\n<\/ul>\n<h3><strong>Eventos<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Selecciona el \u00abBot\u00f3n de radio\u00bb, y haz clic en \u00abA\u00f1adir evento\u00bb en la paleta Eventos.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71239\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-7.png\" alt=\"\" width=\"792\" height=\"337\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abEstablecer valor a un elemento\u00bb y haz clic en el nombre \u00abCampo de texto de entrada\u00bb.<\/span><\/li>\n<li>Selecciona el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb para el valor y haz clic en \u00abA\u00f1adir expresi\u00f3n\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71239\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-8.png\" alt=\"\" width=\"792\" height=\"337\"><\/li>\n<li>Arrastra y suelta la entrada [Sample .Name] dentro del campo del constructor de expresiones. <span style=\"font-size: inherit;\"><span style=\"font-size: inherit;\">Pulsa \u00abOk\u00bb y \u00abAceptar\u00bb para terminar de crear el evento.<\/span><\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 58%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767359228\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Vuelve a la paleta Eventos, con el bot\u00f3n de opci\u00f3n seleccionado y haz clic en el \u00ab+\u00bb para a\u00f1adir un nuevo evento.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abEstablecer valor a un elemento\u00bb y haz clic en el apellido \u00abCampo de texto de entrada\u00bb.<\/span><\/li>\n<li>Selecciona el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb para el valor y haz clic en \u00abA\u00f1adir expresi\u00f3n\u00bb.<\/li>\n<li>Arrastra y suelta la entrada [Sample .Last name] dentro del campo del constructor de expresiones. Pulsa \u00abOk\u00bb y \u00abAceptar\u00bb para terminar de crear el evento.\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767359256\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Simula tu prototipo.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este ejemplo, aprender\u00e1s a utilizar botones de opci\u00f3n para seleccionar una fila de datos. As\u00ed es como se construye: Ver&nbsp; Ve a la paleta \u00abMaestros&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8429,8424],"tags":[],"class_list":["post-124646","post","type-post","status-publish","format-standard","hentry","category-formularios-y-datos-es","category-trucos-avanzados"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124646"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124646"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124646\/revisions"}],"predecessor-version":[{"id":126207,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124646\/revisions\/126207"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}