无法检查动态创建的复选框

时间:2014-05-13 23:02:24

标签: javascript jquery html checkbox radio-button

我有一个jquery函数,用于检查跨度内是否有变化。

$('#productionInputs').change(function() {

span没有任何代码/子标记。这是因为这是我添加动态创建的单选按钮的地方

 #productionInputs

让我们说#productionInputs具有由另一个事件生成的动态生成的单选按钮。只要跨度内有变化(选中单选按钮,就会运行上述功能。)

如果选中了'Yes'值的单选按钮,则会弹出一组复选框。现在,问题从这里开始,每当我尝试勾选任何复选框时,都没有任何反应。我无法点击它!

我尝试检查该元素,似乎每次我尝试单击一个复选框时,由于$('#productionInputs').change(function() {函数,整个事物会再次生成。

无论如何我可以阻止它吗?

以下是代码:

    function isCheck(name) {
        var elems = document.getElementsByName(name);
        for (var i = 0; i < elems.length; i++) {
            if (elems[i].checked) {
                return elems[i].value;
            }
        }

        return undefined;
    }

    function isOneChecked() {
        // All <input> tags...
        var chx = document.getElementsByTagName('input');
        for (var i = 0; i < chx.length; i++) {
            // If you have more than one radio group, also check the name attribute
            // for the one you want as in && chx[i].name == 'choose'
            // Return true from the function on first match of a checked item
            if (chx[i].type == 'radio' && chx[i].checked) {
                return true;
            } 
        }
        // End of the loop, return false
        return false;
    }


$('#productionInputs').change(function() {
        var responseSS = isCheck('production-input-ss');
        var responseAS = isCheck('production-input-as');
        var responsePD = isCheck('production-input-pu');
        var responsePU = isCheck('production-input-pd');

        var sector = $('#compSector').val();
        var result = '';
        var resultSS = '';
        var resultAS = '';
        var resultPU = '';
        var resultPD = '';

        var ifChecked = isOneChecked();

        if(sector == 'Food Products and Beverages, Tobacco, Animal feeds, Agricultural products') {
            if(ifChecked) {
                if(responseSS == 'Yes') {
                    resultSS 
                        = "<p class='question'>Please specify. Click as many as apply.</p>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Seafood'>Seafood<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Shortening'>Shortening<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Sugar'>Sugar<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Buffalo Meat'>Buffalo Meat<br/>"                        
                        +   "<input type='checkbox' name='production-ss-items[]' value='Copra Cake'>Copra Cake<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Vitamins'>Vitamins<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Milk Chocolate'>Milk Chocolate<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Coloring'>Coloring<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Fuel'>Fuel<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Refined Sugar'>Refined Sugar<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Flour'>Flour<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Shortening'>Shortening<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Garlic'>Garlic<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Copra Cake'>Copra Cake<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Onion'>Onion<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Rice Bran'>Rice Bran<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='others'>Others"; 
                }

                else if(responseAS == 'Yes') {
                    resultAS 
                        = "<p class='question'>Please specify. Click as many as apply.</p>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Seafood'>Seafood<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Shortening'>Shortening<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Sugar'>Sugar<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Buffalo Meat'>Buffalo Meat<br/>"                        
                        +   "<input type='checkbox' name='production-ss-items[]' value='Copra Cake'>Copra Cake<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Vitamins'>Vitamins<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Milk Chocolate'>Milk Chocolate<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Coloring'>Coloring<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Fuel'>Fuel<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Refined Sugar'>Refined Sugar<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Flour'>Flour<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Shortening'>Shortening<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Garlic'>Garlic<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Copra Cake'>Copra Cake<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Onion'>Onion<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Rice Bran'>Rice Bran<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='others'>Others"; 
                }

                else if(responsePU == 'Yes') {
                    resultPU
                        = "<p class='question'>Please specify. Click as many as apply.</p>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Seafood'>Seafood<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Shortening'>Shortening<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Sugar'>Sugar<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Buffalo Meat'>Buffalo Meat<br/>"                        
                        +   "<input type='checkbox' name='production-ss-items[]' value='Copra Cake'>Copra Cake<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Vitamins'>Vitamins<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Milk Chocolate'>Milk Chocolate<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Coloring'>Coloring<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Fuel'>Fuel<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Refined Sugar'>Refined Sugar<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Flour'>Flour<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Shortening'>Shortening<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Garlic'>Garlic<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Copra Cake'>Copra Cake<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Onion'>Onion<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Rice Bran'>Rice Bran<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='others'>Others"; 
                }

                else if(responsePD == 'Yes') {
                    resultPD 
                        = "<p class='question'>Please specify. Click as many as apply.</p>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Seafood'>Seafood<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Shortening'>Shortening<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Sugar'>Sugar<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Buffalo Meat'>Buffalo Meat<br/>"                        
                        +   "<input type='checkbox' name='production-ss-items[]' value='Copra Cake'>Copra Cake<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Vitamins'>Vitamins<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Milk Chocolate'>Milk Chocolate<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Coloring'>Coloring<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Fuel'>Fuel<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Refined Sugar'>Refined Sugar<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Flour'>Flour<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Shortening'>Shortening<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Garlic'>Garlic<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Copra Cake'>Copra Cake<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Onion'>Onion<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='Rice Bran'>Rice Bran<br/>"
                        +   "<input type='checkbox' name='production-ss-items[]' value='others'>Others"; 
                }
            } 
        }

        $('#productionInputSSConfirmed').html(resultSS);
        $('#productionInputASConfirmed').html(resultAS);
        $('#productionInputPUConfirmed').html(resultPU);
        $('#productionInputPDConfirmed').html(resultPD);
    });

以下是生成的单选按钮的代码:

 $(document).ready(function() {
        $("#manufacturingForm").formToWizard({ submitButton: 'saveInfo' });
    // Sector, Production Input
    $("#compSector").on('change', function() {
        var sector = $(this).val();
        var resultSS = '';
        var resultAS = '';
        var resultPU = '';
        var resultPD = '';
        var resultOther = '';

        if(sector) {
            {
                resultSS  = "<p class='question'>Do you have any important production inputs in your company that were in SHORT SUPPLY this month(<?=$currentMonth?>)?</p>"
                        +   "<input type='radio' name='production-input-ss' value='Yes' required>Yes<br />"
                        +   "<input type='radio' name='production-input-ss' value='None'>None<br />";

                resultAS  = "<p class='question'>Do you have any important production inputs in your company that were in ABUNDANT SUPPLY this month(<?=$currentMonth?>)?</p>"
                        +   "<input type='radio' name='production-input-as' value='Yes' required>Yes<br />"
                        +   "<input type='radio' name='production-input-as' value='None'>None<br />";

                resultPU  = "<p class='question'>Do you have any important production inputs in your company with PRICES THAT ARE ON THE UPSIDE this month(<?=$currentMonth?>)?</p>"
                        +   "<input type='radio' name='production-input-pu' value='Yes' required>Yes<br />"
                        +   "<input type='radio' name='production-input-pu' value='None'>None<br />";

                resultPD  = "<p class='question'>Do you have any important production inputs in your company with PRICES THAT ARE ON THE DOWNSIDE this month(<?=$currentMonth?>)?</p>"
                        +   "<input type='radio' name='production-input-pd' value='Yes' required>Yes<br />"
                        +   "<input type='radio' name='production-input-pd' value='None'>None<br />";
            }
        }

        $('#spnProductionInputOther').html(resultOther);
        $('#productionInputSS').html(resultSS);
        $('#productionInputAS').html(resultAS);
        $('#productionInputPU').html(resultPU);
        $('#productionInputPD').html(resultPD);
    });

1 个答案:

答案 0 :(得分:0)

@ user3530303您可以通过获取所选单选按钮的值

来逻辑地尝试此操作
<input type="radio" name="radio1" value="creditcard" />
<input type="radio" name="radio2" value="cash"/>
<input type="radio" name="radio3" value="cheque"/>
<input type="radio" name="radio4" value="instore"/>

$("input[name='radio1']:checked").val()

请参阅以下链接,它可能有所帮助 javascript jquery radio button click