Jquery mobile 如何在jQuery mobile Radio的标签和带有敲除的复选框中查找文本?

Jquery mobile 如何在jQuery mobile Radio的标签和带有敲除的复选框中查找文本?,jquery-mobile,checkbox,knockout.js,radio-button,label-for,Jquery Mobile,Checkbox,Knockout.js,Radio Button,Label For,我使用的是jquery1.9.1、jqm1.3和knockout 2.2.1 我的html如下所示: <div data-role="page" id="coloursView"> <div data-role="content"> <fieldset data-role="controlgroup"> <legend>Colour:</legend> <in

我使用的是jquery1.9.1、jqm1.3和knockout 2.2.1

我的html如下所示:

<div data-role="page" id="coloursView">
    <div data-role="content">
        <fieldset data-role="controlgroup">
            <legend>Colour:</legend>
            <input type="radio" name="colours" data-bind="checked: colour" id="radio-1" value="1" />
            <label for="radio-1">Red</label>
            <input type="radio" name="colours" data-bind="checked: colour" id="radio-2" value="2" />
            <label for="radio-2">Blue</label>
            <input type="radio" name="colours" data-bind="checked: colour" id="radio-3" value="3" />
            <label for="radio-3">Green</label>
        </fieldset>
    </div><!--/content -->
</div><!--/page -->
现在,我想获得所选颜色的描述,而不是值。 在我看来,我需要一个定制绑定,比如:

ko.bindingHandlers.label = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $("radio", element).filter(function(el) { return $(el).text() === value; }).prop("checked", "checked");
    }
};
但是我无法获得相关标签的文本-文本标签

有人能帮忙吗? 提前感谢

更新 这里是另一种只查找
:选中的
项并删除文本中的空白的方法

复选框

无线电


复选框

无线电


对不起,如果我回答我自己,但我想我明白了至少用于无线电输入。

现在,我在字段集级别有了一个自定义绑定处理程序,以保持标记的干净性和可读性,我可以:

<fieldset data-role="controlgroup" id="front-colours" data-bind="frontColourLabel: frontColour">
    <legend>Front Colour: <span data-bind="text: frontColourDescription"></span> (Value: <span data-bind="text: frontColour"></span>)</legend>
    <input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-1" value="red" />
    <label for="fc-radio-1">Red</label>
    <input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-2" value="blue" />
    <label for="fc-radio-2">Blue</label>
    <input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-3" value="green" />
    <label for="fc-radio-3">Green</label>
</fieldset>
这里唯一棘手的部分是,字段集的id等于无线电组的名称,因为很容易过滤出我想要寻址的无线电组

工作示例:


我现在尝试让复选框部分正常工作。有人可以帮忙吗?

将输入包装在标签中是有效的html,但事实并非如此,因此我认为关键在于通过属性标签找到标签,比如$('label[for='+element.id+']')。text();是的,这是可能的,但我只是注意到你只需要支票。因此,你需要仔细检查并选择选中的。我再做一个演示@user2308978谢谢Omar,我在最新的jquery版本中也发现了一个变化,为了检索收音机,而不是输入[radio],它应该是:输入[type=radio][name=Colors]@user2308978 yup
$('input[type=radio][name=Colors]
工作。@user2308978我已经更新了我的演示,因为文本需要去掉空白。
$('input[type=checkbox]').each(function () {
 if ($(this).is(':checked')) {
  var checkbox = $(this).prev('label').text();
  alert('Checkbox: ' + checkbox.replace(/\s+/g, ' '));
 }
});
$('input[type=radio]').each(function () {
 if ($(this).is(':checked')) {
  var radio = $(this).prev('label').text();
  alert('Radio: ' + radio.replace(/\s+/g, ' '));
 }
});
$('div.ui-checkbox').find('span.ui-btn-text').text();
$('div.ui-radio').find('span.ui-btn-text').text();
<fieldset data-role="controlgroup" id="front-colours" data-bind="frontColourLabel: frontColour">
    <legend>Front Colour: <span data-bind="text: frontColourDescription"></span> (Value: <span data-bind="text: frontColour"></span>)</legend>
    <input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-1" value="red" />
    <label for="fc-radio-1">Red</label>
    <input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-2" value="blue" />
    <label for="fc-radio-2">Blue</label>
    <input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-3" value="green" />
    <label for="fc-radio-3">Green</label>
</fieldset>
ko.bindingHandlers.frontColourLabel = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.utils.unwrapObservable(valueAccessor()); 
        var id = $('input:radio[name='+element.id+']:checked').prop("id");
        var radioText = $('label[for=' + id + ']').text();
        viewModel.frontColourDescription(radioText);
    }
};