复选框单击功能不起作用

Checkbox click function not working

本文关键字：不起作用 功能 单击 复选框      更新时间：2024-06-28

我有一组同名的复选框。每个复选框关联一个文本框。在页面加载时，我禁用了所有的文本框。单击每个复选框时，应启用与该复选框对应的文本框。

问题是，我尝试使用不同的代码来启用复选框单击时的文本框。但是复选框单击功能不起作用。

代码如下所示（我使用的是MVC框架）：

{loopstart:setting:100}
 {if($setting%2==0)}
 <tr height="30">
 {endif}
 <td align="left">          
 <input type="checkbox" name="settingcheck" id="setting{$setting[0]}" value="{$setting[0]}"/>{$setting[1]}
</td>                                                   <td>                                                
<input type="text" size="2px" id="text{$setting[0]}">                                               

</td>
                                                {if($setting%2==1)}
                                                <td>&nbsp;</td> 
                                                {endif}     
                                    {loopend:setting}

JQuery

$(document).ready(function(){
    $("INPUT[type=text]").prop("disabled",true); 
    $("INPUT[type=text]").css("background-color", "#ccc");
});

此代码用于在页面加载时禁用所有文本框，并且运行良好。

$('input[name='settingcheck']:checked').click(function() {
}

我写了上面的功能，用于在相应的复选框点击时启用文本框。但这个功能不起作用。我试着在这个功能中提醒一些文本。

代码中有问题吗。有人能帮我解决这个问题吗。提前谢谢。

您的字符串文字格式不正确：由于您使用了''来将文字括起来，因此字符串中所有出现的'都必须转义（'input[name=''settingcheck'']:checked'），或者您可以使用""代替

$(document).on('change', 'input[name="settingcheck"]', function() {
    if(this.checked){
        //this is checked now
    } else {
        //this is unchecked now
    }
});

如果尚未检查，可以尝试此

$('input[name="settingcheck"]').click(function() {
    if($(this).is(':checked')){
        alert('checked');
    }
})

参见演示

尝试这个

$('input[name="settingcheck"]:checked').click(function() {
}

试试这个

$('input[name="settingcheck"]:checked').on('click',function() {
});

或

$(document).on('click', 'input[name="settingcheck"]:checked', function() {
});

或

$(document).on('change', 'input[name="settingcheck"]', function() {
}

试试这个：

$("input[name='settingcheck']:checked").click(function() {
}

工作演示

你可以这样尝试：

<table>
    <tr>
        <td>
            <input type="checkbox" onclick="checkBoxClicked1(this)" />
        </td>
        <td>
            <input type="text" style="display: none">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" onclick="checkBoxClicked1(this)" />
        </td>
        <td>
            <input type="text" style="display: none">
        </td>
    </tr>
</table>

Javascript：

 function checkBoxClicked1(checkbox) {
        debugger;
        var a = $(checkbox).is(':checked');
        var textBox = $(checkbox).closest("tr").children()[1].children[0];
        if (a) {
            $(textBox).show();
            $(checkbox).prop("checked", true);
        } else {
            $(textBox).hide();
            $(checkbox).prop("checked", false);
        }
    }
相关文章：