2013-05-07 64 views
0

我有一個腳本,將複選框值放入(隱藏)輸入字段。JS:乾枯的jQuery腳本 - 複選框值輸入字段

可以看到它在這裏的行動:http://jsfiddle.net/obmerk99/6DpmK/

jQuery(document).ready(function() { 

      var $checkboxes = jQuery(".o99_remove_check"); 
      $checkboxes.on('change', function() { 
       var ids = $checkboxes.filter(':checked').map(function() { 
        return this.value; 
       }).get().join(' | '); 
       jQuery('#o99_brsa_settingsbrsa_remove_menu_list').val(ids); 
      }); 


     }); 

的問題是:我怎麼能重複這一過多次迭代(比如上例中2),但沒有與jQuery的重複自己(標記是由php生成的,所以它不是問題)

現在,我只是重複整個腳本,同時將複選框類增加到o99_remove_check2和輸入ID到o99_brsa_settingsbrsa_remove_menu_list2,但我的寶或者js技能不允許我想出一個解決方案來製作一個腳本。

其他任何我想只是混淆了腳本,發送一個複選框列表值其他輸入字段,或者甚至可以更新他們都在一起(我試過用5個實例。)

編輯我後的意見/ respons

我寧願一個解決方案,我可以將屬性同一個類的所有複選框..

+0

「乾燥起來」 ?這是否意味着「嘗試」? – feeela 2013-05-07 15:08:03

回答

2

裹在被稱爲「wrapper'.This將持有的選項,隱藏的文本框中輸入一個類名的div UR選項。

<div class="wrapper"> 
    <p>FIELD SET 1</p> 
    <input class="checkbox o99_remove_check" type="checkbox" value="Option1" name="brsa-remove-SubMenu-general.php">Option1 
    <br> 
    <input class="checkbox o99_remove_check" type="checkbox" value="Option2" name="brsa-remove-SubMenu-writing.php">Option2 
    <br> 
    <input class="checkbox o99_remove_check" type="checkbox" value="Option3" name="brsa-remove-SubMenu-reading.php">Option3 
    <br> 
    <input type="text" value="" name="o99_brsa_settings[brsa_remove_menu_list]" id="o99_brsa_settingsbrsa_remove_menu_list_big" class="regular-text" disabled="true"> 
    <label for="o99_brsa_settingsbrsa_remove_menu_list_big" class="description"> 
     <br>this will actually be hiiden field</label> 
    </p> 
</div> 

有一個腳本,將附上一個常見的事件爲所有UR複選框如下:

jQuery(document).ready(function() { 
var $checkboxes = jQuery(".wrapper .checkbox"); 
    $checkboxes.on('change', function() { 
     var ids = jQuery(this).parent().find('.checkbox').filter(':checked').map(function() { 
      return this.value; 
     }).get().join(' | '); 
     jQuery(this).parent().find('.regular-text').val(ids) 

    }); 
}); 

這個腳本會發現選擇複選框組的父母和會發現HiddenTextBox(由「標識classname regular-text')顯示你想要的值。 同時,任何沒有O迭代,u需要烏爾script.Just沒有CHAGE添加HTML片段(確保你給正確的className)...希望這有助於... 爲的jsfiddle:http://jsfiddle.net/GUZaD/9/

+0

非常感謝。它效果很好。爲什麼我想更「自動化」它(不使用相同的類)的原因是我將這些類也用於其他腳本,並且放入不同類會使事情更加複雜化。再次感謝。可以從腳本中學到很多東西。 – 2013-05-08 00:05:34

2

如果有一個數字在每節課結束時,你可以像這樣:

jQuery("[class^='o99_remove_check']").change(function() { 
    var class = $(this).attr("class"); 
    var classNum = class.substr(class.length - 1); //Number at the end of each class 

    var ids = $(".o99_remove_check"+classNum).filter(':checked').map(function() { 
     return this.value; 
    }).get().join(' | '); 

    jQuery('#o99_brsa_settingsbrsa_remove_menu_list'+classNum).val(ids); 
}); 
+0

謝謝,這可能對我有用,但是在那裏也可以有類似的解決方案嗎? – 2013-05-07 15:02:43

+0

不知道我明白你在問什麼?爲每組複選框保留相同的類? – tymeJV 2013-05-07 15:04:02

+0

nop,對頁面上的所有複選框。 – 2013-05-07 15:06:48

0

如果您使某個函數的複選框選擇器和隱藏的字段選擇器變量可以調用該函數兩次。

http://jsfiddle.net/SPuNy/

jQuery(document).ready(function() { 

    var initCheckboxList = function (checkboxSelector, hiddenInputSelector) { 
     var $checkboxes = jQuery(checkboxSelector); 
     $checkboxes.on('change', function() { 
      var ids = $checkboxes.filter(':checked').map(function() { 
       return this.value; 
      }).get().join(' | '); 
      jQuery(hiddenInputSelector).val(ids); 
     }); 
    } 

    initCheckboxList('.o99_remove_check', '#o99_brsa_settingsbrsa_remove_menu_list_big'); 
    initCheckboxList('.o99_remove_check2', '#o99_brsa_settingsbrsa_remove_menu_list2'); 
}); 
相關問題