在具有特定类的div中包含输入类型的复选框

时间:2014-06-29 15:25:17

标签: jquery jquery-mobile

$('#createcase').on('pagebeforeshow', function(e) {  

    if ($('input', e.target).attr("type") === 'checkbox')
    {
        $('input[type=checkbox]',e.target).wrap("<div>");
        $('input[type=checkbox]',e.target).attr("class","ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-on ui-first-child");         
    }
    else
    {
        $('input', e.target).filter('input:not(#mybutton)').wrap("<div class='ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear'>");
    }
});

我的HTML包含:

<input type="checkbox" value="" name=""/> Reminder
<input type="checkbox" value="Yes" name="1"/> Reminder
<input type="checkbox" value="No" name="2"/>

我的代码是类似于上面的内容,但它永远不会进入if循环,我的html输入中有复选框

2 个答案:

答案 0 :(得分:1)

尝试

$(function() {
    $("#createcase").on("pagebeforeshow", function(e) {
        var _class = "ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-on ui-first-child";
        var div = $("<div />");
        var checks = $(e.target).find("input[type=checkbox]");
        var notchecks = $(e.target).find("input[type!=checkbox]");
        $(checks).addClass(_class).wrap(div);
        $(notchecks).wrap($(div).addClass(_class));
        console.log(checks, notchecks.parent(), notchecks);
    });
});

jsfiddle http://jsfiddle.net/guest271314/N29rd/

答案 1 :(得分:0)

我认为它适用于一些编辑:

$(document).ready(function(e) {  

    if ($('input', e.target).attr("type") === 'checkbox')
    {
        $('input[type=checkbox]',e.target).wrap("<div>");
        $('input[type=checkbox]',e.target).addClass("ui-btn ui-corner-all")
        .addClass("ui-btn-inherit")
        .addClass("ui-btn-icon-left")
        .addClass("ui-checkbox-on")
        .addClass("ui-first-child");         
    }
    else
    {
        $('input', e.target).filter('input:not(#mybutton)').wrap("<div class='ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear'>");
    }
});