Question

我试图添加一个＆＃39; span＆＃39;在任何具有＆＃39; required＆＃39;的元素之后除了“复选框”之外的财产＆＃39;但似乎并没有在复选框上工作＆＃39; （复选框仍有span，复选框必须排除或不包括在内）。任何想法，帮助，线索，建议，建议？以下是我的摘录。

＆＃13;

$(document).ready(function() {
  //add required indicator to all input, select and etc. that has property of required.
  $(':required:not([name="checkbox"])').after('<span style="color:red;font-size:11px;clear:both;float:none;margin: 2px 0px 5px 0px;">This field is required</span>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" required />
<br>
<input type="text" required />
<br>
<input type="text" required />
<br>
<input type="checkbox" required />

＆＃13;

Answer 1

:required不是有效的伪选择器，请使用[required]
checkbox type不是name。选择器[name="checkbox"]将选择name属性值为checkbox的所有元素。

而不是

$(':required:not([name="checkbox"])')

使用

$('[required]:not([type="checkbox"])')
   ^        ^      ^^^^

＆＃13;

$(document).ready(function() {
  //add required indicator to all input, select and etc. that has property of required.
  $('[required]:not([type="checkbox"])').after('<span style="color:red;font-size:11px;clear:both;float:none;margin: 2px 0px 5px 0px;">This field is required</span>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" required />
<br>
<input type="text" required />
<br>
<input type="text" required />
<br>
<input type="checkbox" required />

＆＃13;

您还可以使用:checkbox选择器：

$('[required]:not(":checkbox")')

＆＃13;

$('[required]:not(":checkbox")').after('<span style="color:red;font-size:11px;clear:both;float:none;margin: 2px 0px 5px 0px;">This field is required</span>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" required />
<br>
<input type="text" required />
<br>
<input type="text" required />
<br>
<input type="checkbox" required />

＆＃13;

Answer 2

只有在您喜欢的情况下才能使用CSS2 / 3执行此操作：

<style>
input span {
    display: none;
}

input.required:not([type="checkbox"]) + span {
    display:block;
    padding: 5px;
    border: 1px solid #ff0000;
    content: "required!";
}
</style>

<div>
    <input type="checkbox" name="checkbox" value="1" checked="checked"     class="required" />
<span></span>
</div>
<div>
    <input type="text" name="text" value="" class="required" />
<span></span>
</div>

我们正在做的是设置隐藏的跨度，但是如果输入具有所需的类并且它不是复选框，则显示跨度。您可以使用:: after和:: before执行其他类型的技巧。 CSS中的 + 是相邻的选择器。我们需要添加跨距因为:: before和::之后选择器的输入[type = text]不起作用，而它适用于其他一些输入字段。

http://www.w3schools.com/cssref/sel_element_pluss.asp

JS小提琴： https://jsfiddle.net/wu4cdrxz/

Answer 3

$('[required]:not([type="checkbox"])')

没有:required伪选择器
您应该使用[type="checkbox"]（不是[name="checkbox"]），因为复选框是属性type

定位具有“必需”属性的所有内容。除了复选框

3 个答案: