使用jQuery获取所有未选中复选框的ID

My main goal is to post "0" when a checkbox is unchecked. I have come across a technique where I need to put a hidden field that has the same name as with my checkbox. Once a checkbox is checked, the hidden field is disabled. It works wonder for me, however, the code seems to be so long and I wanted to look a way to shorten this up.

我的主要目标是在未选中复选框时发布“0”。我遇到过一种技术,我需要放置一个与我的复选框同名的隐藏字段。选中复选框后,将禁用隐藏字段。它对我来说很奇怪,但是,代码似乎很长,我想找一个缩短它的方法。

HTML:

<div id="subscriptionForm">
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft1" id="checkLeft1" />
  <input type="hidden" value="0" name="checkLeft1" id="checkLeft1Hidden" />
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft2" id="checkLeft2"/>
  <input type="hidden" value="0" name="checkLeft2" id="checkLeft2Hidden" />

  <input type="checkbox" value="1" class="checkRight" name="checkRight1" id="checkRight1"/>
  <input type="hidden" value="0" name="checkRight1" id="checkRight1Hidden" />
  <input type="checkbox" value="1" class="checkRight" name="checkRight2" id="checkRight2"/>
  <input type="hidden" value="0" name="checkRight2" id="checkRigh21Hidden" />
</div>

Script:

function disableHidden() {
  if ($("#checkLeft1").is(":checked")) {
    $("#check1Hidden").attr("disabled", true);
  }
  if ($("#checkLeft2").is(":checked")) {
    $("#check2Hidden").attr("disabled", true);
  }
  if ($("#checkRight1").is(":checked")) {
    $("#trAsiaEuropeHidden").attr("disabled", true);
  }
  if ($("#checkRight2").is(":checked")) {
    $("#trAsiaNamHidden").attr("disabled", true);
  }
}

I had to put different classes on left and right so as to follow the desired layout.

我必须在左右两侧放置不同的类,以便遵循所需的布局。

Do you have some suggestion on this? Thank you!

你对此有什么建议吗?谢谢!

6 个解决方案

#1

All of the stuff you have in your code is a bit overkill. Depending on the place which is receiving the data (if PHP), you should be able to move the hidden fields to above their associated checkboxes, then remove the Javascript completely.

您在代码中拥有的所有内容都有点矫枉过正。根据接收数据的位置(如果是PHP),您应该能够将隐藏字段移动到其关联的复选框上方,然后完全删除Javascript。

<div id="subscriptionForm">
  <input type="hidden" value="0" name="checkLeft1" id="checkLeft1Hidden" />
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft1" id="checkLeft1" />
  <input type="hidden" value="0" name="checkLeft2" id="checkLeft2Hidden" />
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft2" id="checkLeft2"/>
  <input type="hidden" value="0" name="checkRight1" id="checkRight1Hidden" />
  <input type="checkbox" value="1" class="checkRight" name="checkRight1" id="checkRight1"/>
  <input type="hidden" value="0" name="checkRight2" id="checkRigh21Hidden" />
  <input type="checkbox" value="1" class="checkRight" name="checkRight2" id="checkRight2"/>
</div>

If, however, you'd rather some Javascript, and cleaner HTML, then you could just insert some hidden fields, like:

但是,如果你更喜欢一些Javascript和更干净的HTML,那么你可以插入一些隐藏的字段,例如:

function zeroOutUncheckedFields() {
  $('#subscriptionForm input[type="checkbox"]').each(function(){
    if (!$(this).is(':checked')) {
      $(this).after('<input type="hidden" name="' + $(this).attr('name') + '" value="0">')
    }
  });
}

and your HTML can just be:

你的HTML可以是:

<div id="subscriptionForm">
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft1" id="checkLeft1" />
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft2" id="checkLeft2"/>
  <input type="checkbox" value="1" class="checkRight" name="checkRight1" id="checkRight1"/>
  <input type="checkbox" value="1" class="checkRight" name="checkRight2" id="checkRight2"/>
</div>

#2

Unless you have a consistent naming pattern for your checkbox/hidden fields, or you have a guaranteed consistent placement of a hidden field after your checkboxes, you wouldn't be able to programmatically do it.

除非您的复选框/隐藏字段具有一致的命名模式,或者您的复选框后面的隐藏字段保证一致,否则您将无法以编程方式执行此操作。

Do your checkboxes have to be named that way? Are you going to have hidden fields placed immediately after checkboxes? The reason I ask is because of the trAsia... ids you've listed in your sample script.

您的复选框必须以这种方式命名吗?您是否会在复选框后立即放置隐藏字段?我问的原因是因为您在示例脚本中列出了trAsia ... ID。

#3

Do you Mean : https://jsfiddle.net/aonk3730/

你的意思是:https://jsfiddle.net/aonk3730/

$('input[type="checkbox"]').change(function(){
  if($(this).is(":checked")){
    $(this).next("input[type='hidden']").attr("disabled", true);
  }else{
    $(this).next("input[type='hidden']").attr("disabled", false);
  }
});

#4

If you just want to "disable" the hidden input if the checkbox preceding it is checked then you could do something like this:

如果您只想“隐藏”隐藏的输入,如果选中它之前的复选框,那么您可以执行以下操作:

   $('#subscriptionForm').find('[type="checkbox"]').change(function() {
        $(this).next('[type="hidden"]').attr('disabled', $(this).is(':checked'));
   }).change();

JSFiddle Demo: https://jsfiddle.net/zka3m8a1/3/

JSFiddle演示:https://jsfiddle.net/zka3m8a1/3/

#5

This may help you

这可能对你有所帮助

HTML

<div id="subscriptionForm">
  <input type="checkbox" class="checkLeft" name="checkLeft1" id="checkLeft1" />
  <input type="checkbox" class="checkLeft" name="checkLeft2" id="checkLeft2"/>
  <input type="checkbox" class="checkRight" name="checkRight1" id="checkRight1"/>
  <input type="checkbox" class="checkRight" name="checkRight2" id="checkRight2"/>
</div>

jQuery

$("input:checkbox").on("change", function() {
  console.log($(this).is(":checked"));
});

#6

$('input[type="checkbox"]').click(function(){
if($(this).is(':checked'))
$(this).next('input[type="hidden"]').attr('disabled','disabled')
else
$(this).next('input[type="hidden"]').removeAttr('disabled');
});

working fiddle

https://jsfiddle.net/c8ue0d3d/6/