Question

我有很多pf输入，我想打开。（'更改'）将输入的值或名称作为字符串获取，以便我以后可以将其转换为类并将其注入到div中。我可能不是最清楚的但是......任何帮助都是好的！

编辑：使用的css类来自上面网站上的框架，我正在开发它

它位于大绿色广场下方，而html是

HTML

<div class="setFullWH setFlex setFlexSuperCenter setFlexWrap ">

<form id="parentProperties" class="setFlex setFlexWrap setFlexRow">
<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto">
<div class="setBasicGrow setJustifyContentSpcArnd">
<input id="flexParent1" name="flexParent" type="radio">
<label for="flexParent1">seFlexRow</label>
</div>
<div class="setBasicGrow">
<input id="flexParent2" name="flexParent" type="radio">
<label for="flexParent2">setFlexColumn</label>
</div>
<div class="setBasicGrow">
<input id="flexParent3" name="flexParent" type="radio">
<label for="flexParent3">setFlexHAlign</label>
</div>
</div>
<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto">
<div class="setBasicGrow">
<input id="flexParent4" name="flexParent" type="radio">
<label for="flexParent4">setFlexVAlign</label>
</div>
<div class="setBasicGrow">
<input id="flexParent5" name="flexParent" type="radio">
<label for="flexParent5">setFlexSuperCenter</label>
</div>
<div class="setBasicGrow">
<input id="flexParent6" name="flexParent" type="radio">
<label for="flexParent6">setAlignContentStart</label>
</div>
</div>
<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto">
<div class="setBasicGrow">
<input id="flexParent7" name="flexParent" type="radio">
<label for="flexParent7">setAlignContentEnd</label>
</div>
<div class="setBasicGrow">
<input id="flexParent8" name="flexParent" type="radio">
<label for="flexParent8">setAlignContentCenter</label>
</div>
<div class="setBasicGrow">
<input id="flexParent9" name="flexParent" type="radio">
<label for="flexParent9">setAlignContentStretch</label>
</div>
</div>
<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto">
<div class="setBasicGrow">
<input id="flexParent10" name="flexParent" type="radio">
<label for="flexParent10">setAlignContentSpcBetw</label>
</div>
<div class="setBasicGrow">
<input id="flexParent11" name="flexParent" type="radio">
<label for="flexParent11">setAlignContentSpcArr</label>
</div>
<div class="setBasicGrow">
<input id="flexParent12" name="flexParent" type="radio">
<label for="flexParent12">setAlignItemsStart</label>
</div>
</div>

<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto">
 <div class="setBasicGrow">
 <input id="flexParent13" name="flexParent" type="radio">
 <label for="flexParent13">setAlignItemsEnd</label>
 </div>
 <div class="setBasicGrow">
 <input id="flexParent14" name="flexParent" type="radio">
 <label for="flexParent14">setAlignItemsCenter</label>
 </div>
 <div class="setBasicGrow">
 <input id="flexParent15" name="flexParent" type="radio">
 <label for="flexParent15">setAlignItemsStretch</label>
 </div>
 </div>

   <div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto">
   <div class="setBasicGrow">
   <input id="flexParent16" name="flexParent" type="radio">
   <label for="flexParent16">setAlignItemsBaseline</label>
   </div>
   <div class="setBasicGrow">
   <input id="flexParent17" name="flexParent" type="radio">
   <label for="flexParent17">setFlexWrap</label>
   </div>
   </div>
   </form>
 </div>

编辑：我设法得到我想要的值，并将其转换为类，并注入到想要的div ...问题是，当我点击其他输入时，我希望删除前者生成的类，或被新的替换......

Answer 1

你能用jQuery吗？如果是那么

$('input:radio').each(function(){
    $(this).on("click",function(){
        console.log($(this).val()); //To get the value, this returns on/off wether your radio is selected or not
        console.log($(this).attr('name')); // To get the name
        console.log($(this).next('label').text()); //To get the text inside your label
    });
})

编辑：添加jsFiddle https://jsfiddle.net/yingchor/6yqhxa41/3/以进行测试和验证。

Answer 2

您可以在javascript中使用以下内容获取输入字段的名称和值：

＆＃13;

var inputs = document.getElementsByTagName('input');
var value = inputs[0].value;
var name = inputs[0].name;

console.log(value);
console.log(name);

＆＃13;

<input id="inputText" type="text" name="fname" value="a value">

＆＃13;

Answer 3

您可以在HTML中添加此新元素（<div class="class-name"></div>），并在其类中注入所选输入（无线电）的名称。这是代码：

<强> HTML

＆＃13;

<div class="class-name"></div>

＆＃13;

<强>的JavaScript

＆＃13;

$(document).ready(function(){
  $('#parentProperties input').on('click', function(){
    className = $(this).attr('name');
    $('.class-name').addClass(className);
  });
});

＆＃13;

在这种情况下，

而不是on.('change') on.('click')是完美的。

JS获取存储在var中的输入值/名称

3 个答案: