使用javascript更改选择复选框

时间:2016-03-29 16:10:44

标签: javascript html select checkbox attributes

我想这样做的原因是,它将是情境化的。如果用户已登录,他们将看到下拉列表。如果没有,他们将看到一个文本列表。理想情况下只是纯文本,但我不知道是否可能,所以我想我可以将<select>转换为复选框并隐藏CSS复选框。

基本上我们不希望没有登录的用户觉得他们可以选择任何东西,因为他们无法订购,这可能会导致沮丧。但我们仍然希望他们查看每种产品可用的选项作为不可选择的文本。如果有更好的方法来做到这一点而不是我的想法,我会感激你的建议。现在,这就是我一起修补的内容,但并没有将选择更改为复选框。

我从这里抓取了一些代码作为起点:http://www.w3schools.com/jsref/met_element_setattribute.asp

另外,我无法抓住&lt;选择&gt;通过id,因为这将是所有&lt;选择&gt;的。

<select id="unique_id" class="unique_class"  data-attribute_name="unique_attribute_name" name="unique_name">
    <option value="" selected="selected">Choose an option</option>
    <option class="attached enabled" value="516">5/16"</option>
    <option class="attached enabled" value="38">3/8"</option>
</select>

使用Javascript:

function myFunction() {
    document.getElementsByTagName("SELECT")[0].setAttribute("type", "checkbox"); 
}

这是一个小提琴:https://jsfiddle.net/d4qdekom/

2 个答案:

答案 0 :(得分:0)

如果我正确理解你的目标,你可以将div放入并隐藏/显示或启用/禁用div,具体取决于用户是否登录。所以将你的选择包装在一个div中,然后切换它。

这样可以避免尝试通过简单地显示/隐藏或启用/禁用用户希望看到的内容来更改html。

答案 1 :(得分:0)

这应该将您的选择转换为复选框,前提是有一个ID为“container”的HTML元素,以附加新的复选框。

这是HTML

<select id="unique_id" class="unique_class" data-attribute_name="unique_attribute_name" name="unique_name">
    <option value="" selected="selected">Choose an option</option>
    <option class="attached enabled" value="516">5/16"</option>
    <option class="attached enabled" value="38">3/8"</option>
</select>

<div id="container"></div>

JavaScript函数将select转换为

下面的复选框
function myFunction() {
    var select = document.getElementById('unique_id');
    var container = document.getElementById('container'); 
    var i;
    for (i = 0; i < select.length; i++) {
        var checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = 'option';
        checkbox.id = 'randomId' + i;
        checkbox.value = select.options[i].text;
        var label = document.createElement('label')
        label.htmlFor = 'randomId' + i;
        label.appendChild(document.createTextNode(select.options[i].text));
        container.appendChild(checkbox);
        container.appendChild(label);
    }
}

然后您可以继续从DOM中删除选择。我想使用JQuery可以使所有这些变得更容易

这是使用getElementsByTagName:

的更新
var selects = x.getElementsByTagName('SELECT');  // this is a node list
for (var i = 0; i < y.length; i++) {
  var select = selects[i]; // this is a single select element
  // You can call the above function on each select here...
}

This is a working jsFiddle

我希望这会有所帮助。