【问题标题】:how do I check dynamically generated radio input value如何检查动态生成的无线电输入值
【发布时间】:2017-08-09 19:53:24
【问题描述】:

每次用户单击“添加”按钮时,我都必须动态生成多个输入字段,并且我能够成功获取它们。每个联系人都应该有这个不同名称的无线电输入字段,所以我以数组形式创建了一个名称。

这是我到目前为止所拥有的,我想知道我应该如何获得每个人的无线电值:

var options = '';
var count = 0;
var maxfields = 4;

$('button#add').click(function() {
  options = '<p>Visit Type:
 <label class="radio-inline">
 <input  type="radio" class="c_visittype' + count +'" name="c_visittype[]" value="Student" required>Student</label>
<label class="radio-inline">
<input type="radio" class="c_visittype' + count +'" name="c_visittype[]" value="Visitor" required>Visitor</label> </p>';   


   if(count < maxfields){
        count++;     
    $(options).fadeIn("slow").appendTo('.companion');

    return false;
  }
}); 

 $('.c_visittype' + count).on('click', function(){
    $('input:radio[name="c_visittype"]').attr('checked', 'checked');
  });

每个人都应该可以选择“学生”或“访客”,每当创建更多人员字段时,我必须为多人获取此值。我将字段名称作为数组的原因是在php 的下一页。

【问题讨论】:

    标签: javascript jquery html


    【解决方案1】:
    <script src="http://code.jquery.com/jquery-2.2.4.min.js"          integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="               crossorigin="anonymous"></script>
    <script>
        $( document ).ready(function() {
            var options = '';
            var count = 0;
            var maxfields = 4;
    
            $('button#add').click(function() {
                var options = '<p style="display: none">Visit Type:<label class="radio-inline"> <input  type="radio" class="c_visittype' + count +'" name="c_visittype' + count +'[]" value="Student" required>Student</label> <label class="radio-inline"><input type="radio" class="c_visittype' + count +'" name="c_visittype' + count +'[]" value="Visitor" required>Visitor</label> </p>';   
    
                if(count < maxfields){
                    count++;     
                    $('.companion').append(options);
                    $(".companion p:last").fadeIn();
                }
            }); 
        });
    </script>
    
    <button id="add">add</button>
    <div class="companion">
    
    </div>
    

    【讨论】:

    • 您的代码似乎可以运行,但请您详细说明您的代码吗?我对jQuery不太熟悉。我对您的解决方案的理解是放置不同的名称而不是与数组具有相同的名称。我当然可以在 php 中对其进行迭代,但只是想清楚地理解它。
    • 将单选按钮分组到独立组需要唯一的名称。 echoecho.com/htmlforms10.htm 。我将 html 附加到整个 div 块的底部 - 将其插入 DOM。之后我可以操作它 - 让它在淡入淡出中可见。
    • 相信我,我给每个单选按钮一个唯一的 ID,但它并没有破坏分组。由于您的代码现在可以正常工作,因此原因可能与动态生成函数或我如何调用它有关。非常感谢:)
    【解决方案2】:
    $('input[name=c_visittype[]]:checked').val();
    

    这就是您使用 jQuery 访问选中的单选按钮值的方式。

    【讨论】:

    • 在您的建议之前我已经尝试了所有方法,但都没有成功,但感谢您的尝试。
    • 尝试在没有“[ ]”的情况下命名单选按钮,看看是否会导致问题。
    • 我也试过了,但没有成功:(,我需要数组中的名称用于下一页的迭代部分。这就是我最终尝试用计数器改变类名的方式它也不起作用。
    【解决方案3】:
    var inputValues = [];
    $('.c_visittype:checked').each(function() {
        inputValues.push($(this).val());
    });
    // Your code using inputValues
    

    有关更改的更新:

    $(function() {
        $('.c_visittype').click(function(){
            // Insert code here
        }
    )});
    

    确保将编号从 class 属性移动到 name 属性(就像以前一样,所有内容都是同一组选项的一部分)。另外,将整个字符串放在 1 行。

    【讨论】:

    • 对不起,这似乎并没有改变我原来的状态。
    • @lakedejavu 你是什么意思?
    • @lakedejavu 糟糕,忘记关闭所有大括号/括号,更改了第二个代码块的最后一行。
    • @lakedejavu 另外,请确保将整个字符串放在 1 行。
    猜你喜欢
    • 2010-11-05
    • 2021-09-23
    • 2013-08-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多