Question

我使用优秀的jEditable插件在我的页面上进行一些就地编辑。我需要一个多重复选框元素。是否有一个允许我这样做的jEditable插件？

我需要一种新的类型来满足我的一个需求：可以调用的多重复选框类型＆＃34;复选框＆＃34;。

当编辑键入的字段＆＃34;复选框＆＃34;时，会出现一个复选框列表，允许用户选择多个选项。保存将返回一个数组，update.php会将此数组存储在我的数据库中。

例如：

<div style="border:red 1px solid;" class="editable"> this is test !</div>

点击div后，div的内容应该是： enter image description here

我不想要多选择：http://i.stack.imgur.com/lANX1.png

非常感谢任何帮助或建议！

Answer 1

以下代码可能会有所帮助........

为此我们需要两个javascript， 1）jquery-1.9.1.js或任何 2）jquery.jeditable.js

<html>
<head>
    <title>Hello!!!</title>

    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery.jeditable.js"></script>

    <script type="text/javascript"> 
     $.editable.addInputType('checkbox', {
        element: function(settings, original) {
            $(this).append('<input type="checkbox" id="check1_" name="check" value="OTCS" /> OTCS');
            $(this).append('<input type="checkbox" id="check2_" name="check" value="OCJ" /> OCJ');
            $(this).append('<input type="checkbox" id="check3_" name="check" value="OCAD" /> OCAD');
            $(this).append('<input type="checkbox" id="check4_" name="check" value="OCB" /> OCB');
            $(this).append('<input type="checkbox" id="check5_" name="check" value="ZINZENDORF" /> ZINZENDORF');
            $(this).append('<input type="checkbox" id="check6_" name="check" value="Others" /> Others');
            var hidden = $('<input type="hidden"/>');
            $(this).append(hidden);
            return(hidden);
        },
        submit: function (settings, original) {
            //some code
        },
        content: function(string, settings, original) {
            //some code
         }
     });

     $(document).ready(function () {
         $('#cb').editable('www.some.com/some.php',{
             indicator: '<img src="img/indicator.gif">',
         tooltip: 'Click to select',
         loadtext: 'loading...',
         type:   'checkbox',
             onblur: 'submit',
             cancel: 'Cancel',
             submit: 'OK'
         });
     });
     </script> 
</head>
<body>
    <h1>Hello!</h1>

    <div style="border:red 1px solid;" id="cb"> Click me to turn in CheckBox....... </div>
</body>

First

After

Jeditable的多个复选框类型

1 个答案: