Javascript JQM选择器可折叠字段集

我正在使用

jquerymobile

作为表单/输入字段集。我需要能够检查字段集中的字段是否完整/是否有值

当可折叠链接关闭时，我需要检测所有字段中是否有一个字段有值，如果没有，则应该向可折叠链接添加一个类

我不能将

ID

用于选择器，因为这将跨越不同的部分，其中包含不同数量的字段集

我的问题是我是否使用了错误的选择器，以及如何修复它

代码：

$('a.ui-icon-minus').on('click',function(){
            if($('fieldset:not(.ui-collapsible-collapsed) input[type="radio"]').is(':checked') || $('fieldset:not(.ui-collapsible-collapsed) textarea').val()){
                if($('fieldset:not(.ui-collapsible-collapsed) input[type="radio"]').is(':checked') && $('fieldset:not(.ui-collapsible-collapsed) textarea').val()){
                        $('div.ui-collapsible-heading a').addClass("complete");
                        $('div.ui-collapsible-heading a').removeClass("half-complete");
                        $('div.ui-collapsible-heading a').removeClass("incomplete");
                        alert("complete");
                } else {
                    $('div.ui-collapsible-heading a').addClass("half-complete");
                    $('div.ui-collapsible-heading a').removeClass("incomplete");
                    alert("half-complete");
                }
            } else {
                $('div.ui-collapsible-heading a').addClass("incomplete");
                alert("incomplete");
            }
        });

<fieldset data-collapsed="false" data-iconpos="right" data-role="collapsible" id="bc1">
    <div class="ui-collapsible-heading ui-collapsible-heading-collapsed" role="heading">
        <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-plus"href="#">BC1 <span class="ui-collapsible-heading-status">click to expand contents</span></a>
    </div>
    <div aria-hidden="true" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed">
    <legend>BC1</legend>
        <p>All bank accounts are opened in line with Group Treasury approval.</p>
        <div class="ui-field-contain">
            <label>Control in Place?</label>
            <div data-role="controlgroup" data-type="horizontal">
                <input id="bc1-ry" name="bc1" type="radio" value="Y">
                <label for="bc1-ry">Yes</label> <input id="bc1-rn" name="bc1" type="radio" value="N">
                <label for="bc1-rn">No</label>
            </div>
            <label for="bc1-v">Verification</label> 
            <textarea id="bc1-v" name="bc1-v"></textarea>
            <label for="bc1-c">Comments</label> 
            <textarea id="bc1-c" name="bc1-c"></textarea>
        </div>
    </div>
</fieldset>

JQUERY:

$('a.ui-icon-minus').on('click',function(){
            if($('fieldset:not(.ui-collapsible-collapsed) input[type="radio"]').is(':checked') || $('fieldset:not(.ui-collapsible-collapsed) textarea').val()){
                if($('fieldset:not(.ui-collapsible-collapsed) input[type="radio"]').is(':checked') && $('fieldset:not(.ui-collapsible-collapsed) textarea').val()){
                        $('div.ui-collapsible-heading a').addClass("complete");
                        $('div.ui-collapsible-heading a').removeClass("half-complete");
                        $('div.ui-collapsible-heading a').removeClass("incomplete");
                        alert("complete");
                } else {
                    $('div.ui-collapsible-heading a').addClass("half-complete");
                    $('div.ui-collapsible-heading a').removeClass("incomplete");
                    alert("half-complete");
                }
            } else {
                $('div.ui-collapsible-heading a').addClass("incomplete");
                alert("incomplete");
            }
        });

<fieldset data-collapsed="false" data-iconpos="right" data-role="collapsible" id="bc1">
    <div class="ui-collapsible-heading ui-collapsible-heading-collapsed" role="heading">
        <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-plus"href="#">BC1 <span class="ui-collapsible-heading-status">click to expand contents</span></a>
    </div>
    <div aria-hidden="true" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed">
    <legend>BC1</legend>
        <p>All bank accounts are opened in line with Group Treasury approval.</p>
        <div class="ui-field-contain">
            <label>Control in Place?</label>
            <div data-role="controlgroup" data-type="horizontal">
                <input id="bc1-ry" name="bc1" type="radio" value="Y">
                <label for="bc1-ry">Yes</label> <input id="bc1-rn" name="bc1" type="radio" value="N">
                <label for="bc1-rn">No</label>
            </div>
            <label for="bc1-v">Verification</label> 
            <textarea id="bc1-v" name="bc1-v"></textarea>
            <label for="bc1-c">Comments</label> 
            <textarea id="bc1-c" name="bc1-c"></textarea>
        </div>
    </div>
</fieldset>

HTML字段集：

$('a.ui-icon-minus').on('click',function(){
            if($('fieldset:not(.ui-collapsible-collapsed) input[type="radio"]').is(':checked') || $('fieldset:not(.ui-collapsible-collapsed) textarea').val()){
                if($('fieldset:not(.ui-collapsible-collapsed) input[type="radio"]').is(':checked') && $('fieldset:not(.ui-collapsible-collapsed) textarea').val()){
                        $('div.ui-collapsible-heading a').addClass("complete");
                        $('div.ui-collapsible-heading a').removeClass("half-complete");
                        $('div.ui-collapsible-heading a').removeClass("incomplete");
                        alert("complete");
                } else {
                    $('div.ui-collapsible-heading a').addClass("half-complete");
                    $('div.ui-collapsible-heading a').removeClass("incomplete");
                    alert("half-complete");
                }
            } else {
                $('div.ui-collapsible-heading a').addClass("incomplete");
                alert("incomplete");
            }
        });

<fieldset data-collapsed="false" data-iconpos="right" data-role="collapsible" id="bc1">
    <div class="ui-collapsible-heading ui-collapsible-heading-collapsed" role="heading">
        <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-plus"href="#">BC1 <span class="ui-collapsible-heading-status">click to expand contents</span></a>
    </div>
    <div aria-hidden="true" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed">
    <legend>BC1</legend>
        <p>All bank accounts are opened in line with Group Treasury approval.</p>
        <div class="ui-field-contain">
            <label>Control in Place?</label>
            <div data-role="controlgroup" data-type="horizontal">
                <input id="bc1-ry" name="bc1" type="radio" value="Y">
                <label for="bc1-ry">Yes</label> <input id="bc1-rn" name="bc1" type="radio" value="N">
                <label for="bc1-rn">No</label>
            </div>
            <label for="bc1-v">Verification</label> 
            <textarea id="bc1-v" name="bc1-v"></textarea>
            <label for="bc1-c">Comments</label> 
            <textarea id="bc1-c" name="bc1-c"></textarea>
        </div>
    </div>
</fieldset>

BC1
所有银行账户均按照集团财务部的批准开立

控制到位？
对
不
验证
评论

尝试使用此类事件处理程序（未测试代码）：

$（.ui可折叠”）.on（“可折叠折叠”，函数（事件，ui）{
var不完整=错误；
//找到所有输入并检查它们
$（event.target）.find（'input，textarea'）。每个（函数（idx，ele）{
//这里检查输入是否有有效值
//例如。
不完整的|=$（ele）.val（）=''；
})
//在元素上切换不完整的类
$（'div.ui-collapsable-heading a'，$（event.target））.toggleClass（'complete'，complete）；
} );

---

希望有帮助。

尝试使用此类事件处理程序（未测试代码）：

$（.ui可折叠”）.on（“可折叠折叠”，函数（事件，ui）{
var不完整=错误；
//找到所有输入并检查它们
$（event.target）.find（'input，textarea'）。每个（函数（idx，ele）{
//这里检查输入是否有有效值
//例如。
不完整的|=$（ele）.val（）=''；
})
//在元素上切换不完整的类
$（'div.ui-collapsable-heading a'，$（event.target））.toggleClass（'complete'，complete）；
} );

---

希望能有所帮助。

谢谢您的帮助，您的代码存在的问题是，如果收音机和第二个文本区域的值不完整，则会变为

true-false-true

，因为它只完成了一半，所以无法工作。请参阅示例：@JamieSterling您的意思可能是，不同的输入类型需要不同的处理来获取它们的值，然后在决策中涉及更多的逻辑，应该应用哪个类。首先，你可以检查每个循环内的ele，无论它是文本收音机还是文本区域，选择值，检查它并设置一个外部变量，如radioValIsOk，然后在每个循环外检查所有变量并决定添加/删除类我已经调整了你的答案以创建一个工作版本。谢谢请参阅：感谢您的帮助，您的代码存在的问题是，如果收音机和第二个文本区域的值不完整，则会变为

true-false-true

，因为它只完成了一半，所以无法工作。请参阅示例：@JamieSterling您的意思可能是，不同的输入类型需要不同的处理来获取它们的值，然后在决策中涉及更多的逻辑，应该应用哪个类。首先，你可以检查每个循环内的ele，无论它是文本收音机还是文本区域，选择值，检查它并设置一个外部变量，如radioValIsOk，然后在每个循环外检查所有变量并决定添加/删除类我已经调整了你的答案以创建一个工作版本。谢谢见：